Cours SEO, contenus et ergonomie - CESI
-
Upload
redpoint -
Category
Technology
-
view
20.608 -
download
3
description
Transcript of Cours SEO, contenus et ergonomie - CESI
CESI SEO CONTENUS amp ERGONOMIEArnaud BRIAND - 4 et 5 feacutevrier 2013
REFERENCEMENT amp MANAGEMENT DES CONTENUS
3
Les taux de clics dans Google selon Optify
Source Etude OPTIFY
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Lrsquoeacutetude OPTIFY de 2011 montre que le 1er reacutesultat capte 364 des clics
4
Les taux de clics dans Google selon WordStream
Source Lrsquoeacutetude WordStream souligne que 646 des clics concernent les liens sponsoriseacutes AdWords contre 354 pour les liens naturels
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Les 3 premiers reacutesultats
captent 411 des clics
Le 1er reacutesultat naturel
capte 89 des clics
5
Les taux de clics dans Google selon Ian Howells
Source wwwseoinphiladelphiacomwp-contentuploads201109ctr-data-ian-howells-sept-2011pdf
REFERENCEMENT amp MANAGEMENT DES CONTENUS
525 de CTR des reacutesultats naturels
13 de CTR des liens sponsoriseacutes
6
Comment fonctionne un moteur de recherche
Un robot drsquoindexation
(araigneacutee crawler) se
charge de laquo visiter raquo les pages du web
Un index est une
gigantesque base de
donneacutees actualiseacutee reacuteguliegraverement parfois
mecircme plusieurs fois par jour Google disposerait
drsquoun million de serveurs
reacutepartis sur 32 sites
Un systegraveme de
traitement des requecirctes
ou index drsquoexeacutecution qui relie lrsquoarriegravere boutique
(index) au guichet (lrsquointerface Google
depuis le navigateur)
1 2 3
La reacutevolution Google - John Battelle Chiffre non confirmeacute par Google Lien vers la source de lrsquoimage
REFERENCEMENT amp MANAGEMENT DES CONTENUS
7
Le reacutefeacuterencement ccedila se construit patiemment
Une e-reacuteputation ccedila ne se nettoie pas ccedila se construit (Spintank)
La marque a besoin drsquoune
identiteacute
Autres leviers
AdWords
Display
Reacuteseau de contenu
Remarketing (Criteo Google)
Emailing
Newsletter
Facebook Ads
Affiliation
REFERENCEMENT amp MANAGEMENT DES CONTENUS
8
Les 3 grandes familles de critegraveres
Technique amp seacutemantique
Construction du site (HTML5 et microdata) et
performance technique
Domaining (brand)
Ancienneteacute du nom
de domaine
TITLE navigateur et
meacutetadonneacutee Description
URLs
Balises de titres Hx
Attributs ALT
Maillage interne
Editorial
Seacutelection des mots cleacutes
Robustesse de la structuration et IA
Saupoudrage
drsquooccurrences cleacutes
Nommage des
rubriques
Animation eacuteditoriale et freacutequence
drsquoactualisation (content excellence)
Reacuteputation
Nombre de liens reacutefeacuterents (backlinks)
Qualiteacute des liens reacutefeacuterents (backlinks)
Varieacuteteacute des backlinks
Qualiteacute des sites reacutefeacuterents
Reacutegulariteacute et
peacuterenniteacute du maillage
TRUST RANK PAGE RANK amp AUTHOR RANK
REFERENCEMENT amp 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 agrave purin
laquo Internet is a cesspool where false information thrives Brands are the solution not the problem Brands are how you sort out of the cesspool raquo
La marque est la solution
wwwhotel-nantesfr
REFERENCEMENT amp MANAGEMENT DES CONTENUS
11
Source wwwwebmetricsgurucom (2 mai 2012)
La marque est la solution
laquo People use SEO to compensate for a lack of branding or simply having not invested enough in branding raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
12
A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAIcircNE DE PRODUCTION
13
Le reacutefeacuterencement on verra agrave la fin
Scheacutema sur une ideacutee de David Marbac (wwwdavidmarbaccomblog)
Etudes amont IA UX amp Contenu Design Inteacutegration (RWD) Deacuteveloppement (avec plan de marquage) Inteacutegration ou mise en
scegravene des contenus RecettageSEO
Le SEO est un meneur de jeu au service de lrsquoIA de lrsquoUX et de la content strategy
REFERENCEMENT amp MANAGEMENT DES CONTENUS
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
REFERENCEMENT amp MANAGEMENT DES CONTENUS
3
Les taux de clics dans Google selon Optify
Source Etude OPTIFY
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Lrsquoeacutetude OPTIFY de 2011 montre que le 1er reacutesultat capte 364 des clics
4
Les taux de clics dans Google selon WordStream
Source Lrsquoeacutetude WordStream souligne que 646 des clics concernent les liens sponsoriseacutes AdWords contre 354 pour les liens naturels
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Les 3 premiers reacutesultats
captent 411 des clics
Le 1er reacutesultat naturel
capte 89 des clics
5
Les taux de clics dans Google selon Ian Howells
Source wwwseoinphiladelphiacomwp-contentuploads201109ctr-data-ian-howells-sept-2011pdf
REFERENCEMENT amp MANAGEMENT DES CONTENUS
525 de CTR des reacutesultats naturels
13 de CTR des liens sponsoriseacutes
6
Comment fonctionne un moteur de recherche
Un robot drsquoindexation
(araigneacutee crawler) se
charge de laquo visiter raquo les pages du web
Un index est une
gigantesque base de
donneacutees actualiseacutee reacuteguliegraverement parfois
mecircme plusieurs fois par jour Google disposerait
drsquoun million de serveurs
reacutepartis sur 32 sites
Un systegraveme de
traitement des requecirctes
ou index drsquoexeacutecution qui relie lrsquoarriegravere boutique
(index) au guichet (lrsquointerface Google
depuis le navigateur)
1 2 3
La reacutevolution Google - John Battelle Chiffre non confirmeacute par Google Lien vers la source de lrsquoimage
REFERENCEMENT amp MANAGEMENT DES CONTENUS
7
Le reacutefeacuterencement ccedila se construit patiemment
Une e-reacuteputation ccedila ne se nettoie pas ccedila se construit (Spintank)
La marque a besoin drsquoune
identiteacute
Autres leviers
AdWords
Display
Reacuteseau de contenu
Remarketing (Criteo Google)
Emailing
Newsletter
Facebook Ads
Affiliation
REFERENCEMENT amp MANAGEMENT DES CONTENUS
8
Les 3 grandes familles de critegraveres
Technique amp seacutemantique
Construction du site (HTML5 et microdata) et
performance technique
Domaining (brand)
Ancienneteacute du nom
de domaine
TITLE navigateur et
meacutetadonneacutee Description
URLs
Balises de titres Hx
Attributs ALT
Maillage interne
Editorial
Seacutelection des mots cleacutes
Robustesse de la structuration et IA
Saupoudrage
drsquooccurrences cleacutes
Nommage des
rubriques
Animation eacuteditoriale et freacutequence
drsquoactualisation (content excellence)
Reacuteputation
Nombre de liens reacutefeacuterents (backlinks)
Qualiteacute des liens reacutefeacuterents (backlinks)
Varieacuteteacute des backlinks
Qualiteacute des sites reacutefeacuterents
Reacutegulariteacute et
peacuterenniteacute du maillage
TRUST RANK PAGE RANK amp AUTHOR RANK
REFERENCEMENT amp 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 agrave purin
laquo Internet is a cesspool where false information thrives Brands are the solution not the problem Brands are how you sort out of the cesspool raquo
La marque est la solution
wwwhotel-nantesfr
REFERENCEMENT amp MANAGEMENT DES CONTENUS
11
Source wwwwebmetricsgurucom (2 mai 2012)
La marque est la solution
laquo People use SEO to compensate for a lack of branding or simply having not invested enough in branding raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
12
A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAIcircNE DE PRODUCTION
13
Le reacutefeacuterencement on verra agrave la fin
Scheacutema sur une ideacutee de David Marbac (wwwdavidmarbaccomblog)
Etudes amont IA UX amp Contenu Design Inteacutegration (RWD) Deacuteveloppement (avec plan de marquage) Inteacutegration ou mise en
scegravene des contenus RecettageSEO
Le SEO est un meneur de jeu au service de lrsquoIA de lrsquoUX et de la content strategy
REFERENCEMENT amp MANAGEMENT DES CONTENUS
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
3
Les taux de clics dans Google selon Optify
Source Etude OPTIFY
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Lrsquoeacutetude OPTIFY de 2011 montre que le 1er reacutesultat capte 364 des clics
4
Les taux de clics dans Google selon WordStream
Source Lrsquoeacutetude WordStream souligne que 646 des clics concernent les liens sponsoriseacutes AdWords contre 354 pour les liens naturels
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Les 3 premiers reacutesultats
captent 411 des clics
Le 1er reacutesultat naturel
capte 89 des clics
5
Les taux de clics dans Google selon Ian Howells
Source wwwseoinphiladelphiacomwp-contentuploads201109ctr-data-ian-howells-sept-2011pdf
REFERENCEMENT amp MANAGEMENT DES CONTENUS
525 de CTR des reacutesultats naturels
13 de CTR des liens sponsoriseacutes
6
Comment fonctionne un moteur de recherche
Un robot drsquoindexation
(araigneacutee crawler) se
charge de laquo visiter raquo les pages du web
Un index est une
gigantesque base de
donneacutees actualiseacutee reacuteguliegraverement parfois
mecircme plusieurs fois par jour Google disposerait
drsquoun million de serveurs
reacutepartis sur 32 sites
Un systegraveme de
traitement des requecirctes
ou index drsquoexeacutecution qui relie lrsquoarriegravere boutique
(index) au guichet (lrsquointerface Google
depuis le navigateur)
1 2 3
La reacutevolution Google - John Battelle Chiffre non confirmeacute par Google Lien vers la source de lrsquoimage
REFERENCEMENT amp MANAGEMENT DES CONTENUS
7
Le reacutefeacuterencement ccedila se construit patiemment
Une e-reacuteputation ccedila ne se nettoie pas ccedila se construit (Spintank)
La marque a besoin drsquoune
identiteacute
Autres leviers
AdWords
Display
Reacuteseau de contenu
Remarketing (Criteo Google)
Emailing
Newsletter
Facebook Ads
Affiliation
REFERENCEMENT amp MANAGEMENT DES CONTENUS
8
Les 3 grandes familles de critegraveres
Technique amp seacutemantique
Construction du site (HTML5 et microdata) et
performance technique
Domaining (brand)
Ancienneteacute du nom
de domaine
TITLE navigateur et
meacutetadonneacutee Description
URLs
Balises de titres Hx
Attributs ALT
Maillage interne
Editorial
Seacutelection des mots cleacutes
Robustesse de la structuration et IA
Saupoudrage
drsquooccurrences cleacutes
Nommage des
rubriques
Animation eacuteditoriale et freacutequence
drsquoactualisation (content excellence)
Reacuteputation
Nombre de liens reacutefeacuterents (backlinks)
Qualiteacute des liens reacutefeacuterents (backlinks)
Varieacuteteacute des backlinks
Qualiteacute des sites reacutefeacuterents
Reacutegulariteacute et
peacuterenniteacute du maillage
TRUST RANK PAGE RANK amp AUTHOR RANK
REFERENCEMENT amp 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 agrave purin
laquo Internet is a cesspool where false information thrives Brands are the solution not the problem Brands are how you sort out of the cesspool raquo
La marque est la solution
wwwhotel-nantesfr
REFERENCEMENT amp MANAGEMENT DES CONTENUS
11
Source wwwwebmetricsgurucom (2 mai 2012)
La marque est la solution
laquo People use SEO to compensate for a lack of branding or simply having not invested enough in branding raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
12
A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAIcircNE DE PRODUCTION
13
Le reacutefeacuterencement on verra agrave la fin
Scheacutema sur une ideacutee de David Marbac (wwwdavidmarbaccomblog)
Etudes amont IA UX amp Contenu Design Inteacutegration (RWD) Deacuteveloppement (avec plan de marquage) Inteacutegration ou mise en
scegravene des contenus RecettageSEO
Le SEO est un meneur de jeu au service de lrsquoIA de lrsquoUX et de la content strategy
REFERENCEMENT amp MANAGEMENT DES CONTENUS
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
4
Les taux de clics dans Google selon WordStream
Source Lrsquoeacutetude WordStream souligne que 646 des clics concernent les liens sponsoriseacutes AdWords contre 354 pour les liens naturels
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Les 3 premiers reacutesultats
captent 411 des clics
Le 1er reacutesultat naturel
capte 89 des clics
5
Les taux de clics dans Google selon Ian Howells
Source wwwseoinphiladelphiacomwp-contentuploads201109ctr-data-ian-howells-sept-2011pdf
REFERENCEMENT amp MANAGEMENT DES CONTENUS
525 de CTR des reacutesultats naturels
13 de CTR des liens sponsoriseacutes
6
Comment fonctionne un moteur de recherche
Un robot drsquoindexation
(araigneacutee crawler) se
charge de laquo visiter raquo les pages du web
Un index est une
gigantesque base de
donneacutees actualiseacutee reacuteguliegraverement parfois
mecircme plusieurs fois par jour Google disposerait
drsquoun million de serveurs
reacutepartis sur 32 sites
Un systegraveme de
traitement des requecirctes
ou index drsquoexeacutecution qui relie lrsquoarriegravere boutique
(index) au guichet (lrsquointerface Google
depuis le navigateur)
1 2 3
La reacutevolution Google - John Battelle Chiffre non confirmeacute par Google Lien vers la source de lrsquoimage
REFERENCEMENT amp MANAGEMENT DES CONTENUS
7
Le reacutefeacuterencement ccedila se construit patiemment
Une e-reacuteputation ccedila ne se nettoie pas ccedila se construit (Spintank)
La marque a besoin drsquoune
identiteacute
Autres leviers
AdWords
Display
Reacuteseau de contenu
Remarketing (Criteo Google)
Emailing
Newsletter
Facebook Ads
Affiliation
REFERENCEMENT amp MANAGEMENT DES CONTENUS
8
Les 3 grandes familles de critegraveres
Technique amp seacutemantique
Construction du site (HTML5 et microdata) et
performance technique
Domaining (brand)
Ancienneteacute du nom
de domaine
TITLE navigateur et
meacutetadonneacutee Description
URLs
Balises de titres Hx
Attributs ALT
Maillage interne
Editorial
Seacutelection des mots cleacutes
Robustesse de la structuration et IA
Saupoudrage
drsquooccurrences cleacutes
Nommage des
rubriques
Animation eacuteditoriale et freacutequence
drsquoactualisation (content excellence)
Reacuteputation
Nombre de liens reacutefeacuterents (backlinks)
Qualiteacute des liens reacutefeacuterents (backlinks)
Varieacuteteacute des backlinks
Qualiteacute des sites reacutefeacuterents
Reacutegulariteacute et
peacuterenniteacute du maillage
TRUST RANK PAGE RANK amp AUTHOR RANK
REFERENCEMENT amp 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 agrave purin
laquo Internet is a cesspool where false information thrives Brands are the solution not the problem Brands are how you sort out of the cesspool raquo
La marque est la solution
wwwhotel-nantesfr
REFERENCEMENT amp MANAGEMENT DES CONTENUS
11
Source wwwwebmetricsgurucom (2 mai 2012)
La marque est la solution
laquo People use SEO to compensate for a lack of branding or simply having not invested enough in branding raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
12
A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAIcircNE DE PRODUCTION
13
Le reacutefeacuterencement on verra agrave la fin
Scheacutema sur une ideacutee de David Marbac (wwwdavidmarbaccomblog)
Etudes amont IA UX amp Contenu Design Inteacutegration (RWD) Deacuteveloppement (avec plan de marquage) Inteacutegration ou mise en
scegravene des contenus RecettageSEO
Le SEO est un meneur de jeu au service de lrsquoIA de lrsquoUX et de la content strategy
REFERENCEMENT amp MANAGEMENT DES CONTENUS
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
5
Les taux de clics dans Google selon Ian Howells
Source wwwseoinphiladelphiacomwp-contentuploads201109ctr-data-ian-howells-sept-2011pdf
REFERENCEMENT amp MANAGEMENT DES CONTENUS
525 de CTR des reacutesultats naturels
13 de CTR des liens sponsoriseacutes
6
Comment fonctionne un moteur de recherche
Un robot drsquoindexation
(araigneacutee crawler) se
charge de laquo visiter raquo les pages du web
Un index est une
gigantesque base de
donneacutees actualiseacutee reacuteguliegraverement parfois
mecircme plusieurs fois par jour Google disposerait
drsquoun million de serveurs
reacutepartis sur 32 sites
Un systegraveme de
traitement des requecirctes
ou index drsquoexeacutecution qui relie lrsquoarriegravere boutique
(index) au guichet (lrsquointerface Google
depuis le navigateur)
1 2 3
La reacutevolution Google - John Battelle Chiffre non confirmeacute par Google Lien vers la source de lrsquoimage
REFERENCEMENT amp MANAGEMENT DES CONTENUS
7
Le reacutefeacuterencement ccedila se construit patiemment
Une e-reacuteputation ccedila ne se nettoie pas ccedila se construit (Spintank)
La marque a besoin drsquoune
identiteacute
Autres leviers
AdWords
Display
Reacuteseau de contenu
Remarketing (Criteo Google)
Emailing
Newsletter
Facebook Ads
Affiliation
REFERENCEMENT amp MANAGEMENT DES CONTENUS
8
Les 3 grandes familles de critegraveres
Technique amp seacutemantique
Construction du site (HTML5 et microdata) et
performance technique
Domaining (brand)
Ancienneteacute du nom
de domaine
TITLE navigateur et
meacutetadonneacutee Description
URLs
Balises de titres Hx
Attributs ALT
Maillage interne
Editorial
Seacutelection des mots cleacutes
Robustesse de la structuration et IA
Saupoudrage
drsquooccurrences cleacutes
Nommage des
rubriques
Animation eacuteditoriale et freacutequence
drsquoactualisation (content excellence)
Reacuteputation
Nombre de liens reacutefeacuterents (backlinks)
Qualiteacute des liens reacutefeacuterents (backlinks)
Varieacuteteacute des backlinks
Qualiteacute des sites reacutefeacuterents
Reacutegulariteacute et
peacuterenniteacute du maillage
TRUST RANK PAGE RANK amp AUTHOR RANK
REFERENCEMENT amp 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 agrave purin
laquo Internet is a cesspool where false information thrives Brands are the solution not the problem Brands are how you sort out of the cesspool raquo
La marque est la solution
wwwhotel-nantesfr
REFERENCEMENT amp MANAGEMENT DES CONTENUS
11
Source wwwwebmetricsgurucom (2 mai 2012)
La marque est la solution
laquo People use SEO to compensate for a lack of branding or simply having not invested enough in branding raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
12
A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAIcircNE DE PRODUCTION
13
Le reacutefeacuterencement on verra agrave la fin
Scheacutema sur une ideacutee de David Marbac (wwwdavidmarbaccomblog)
Etudes amont IA UX amp Contenu Design Inteacutegration (RWD) Deacuteveloppement (avec plan de marquage) Inteacutegration ou mise en
scegravene des contenus RecettageSEO
Le SEO est un meneur de jeu au service de lrsquoIA de lrsquoUX et de la content strategy
REFERENCEMENT amp MANAGEMENT DES CONTENUS
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
6
Comment fonctionne un moteur de recherche
Un robot drsquoindexation
(araigneacutee crawler) se
charge de laquo visiter raquo les pages du web
Un index est une
gigantesque base de
donneacutees actualiseacutee reacuteguliegraverement parfois
mecircme plusieurs fois par jour Google disposerait
drsquoun million de serveurs
reacutepartis sur 32 sites
Un systegraveme de
traitement des requecirctes
ou index drsquoexeacutecution qui relie lrsquoarriegravere boutique
(index) au guichet (lrsquointerface Google
depuis le navigateur)
1 2 3
La reacutevolution Google - John Battelle Chiffre non confirmeacute par Google Lien vers la source de lrsquoimage
REFERENCEMENT amp MANAGEMENT DES CONTENUS
7
Le reacutefeacuterencement ccedila se construit patiemment
Une e-reacuteputation ccedila ne se nettoie pas ccedila se construit (Spintank)
La marque a besoin drsquoune
identiteacute
Autres leviers
AdWords
Display
Reacuteseau de contenu
Remarketing (Criteo Google)
Emailing
Newsletter
Facebook Ads
Affiliation
REFERENCEMENT amp MANAGEMENT DES CONTENUS
8
Les 3 grandes familles de critegraveres
Technique amp seacutemantique
Construction du site (HTML5 et microdata) et
performance technique
Domaining (brand)
Ancienneteacute du nom
de domaine
TITLE navigateur et
meacutetadonneacutee Description
URLs
Balises de titres Hx
Attributs ALT
Maillage interne
Editorial
Seacutelection des mots cleacutes
Robustesse de la structuration et IA
Saupoudrage
drsquooccurrences cleacutes
Nommage des
rubriques
Animation eacuteditoriale et freacutequence
drsquoactualisation (content excellence)
Reacuteputation
Nombre de liens reacutefeacuterents (backlinks)
Qualiteacute des liens reacutefeacuterents (backlinks)
Varieacuteteacute des backlinks
Qualiteacute des sites reacutefeacuterents
Reacutegulariteacute et
peacuterenniteacute du maillage
TRUST RANK PAGE RANK amp AUTHOR RANK
REFERENCEMENT amp 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 agrave purin
laquo Internet is a cesspool where false information thrives Brands are the solution not the problem Brands are how you sort out of the cesspool raquo
La marque est la solution
wwwhotel-nantesfr
REFERENCEMENT amp MANAGEMENT DES CONTENUS
11
Source wwwwebmetricsgurucom (2 mai 2012)
La marque est la solution
laquo People use SEO to compensate for a lack of branding or simply having not invested enough in branding raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
12
A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAIcircNE DE PRODUCTION
13
Le reacutefeacuterencement on verra agrave la fin
Scheacutema sur une ideacutee de David Marbac (wwwdavidmarbaccomblog)
Etudes amont IA UX amp Contenu Design Inteacutegration (RWD) Deacuteveloppement (avec plan de marquage) Inteacutegration ou mise en
scegravene des contenus RecettageSEO
Le SEO est un meneur de jeu au service de lrsquoIA de lrsquoUX et de la content strategy
REFERENCEMENT amp MANAGEMENT DES CONTENUS
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
7
Le reacutefeacuterencement ccedila se construit patiemment
Une e-reacuteputation ccedila ne se nettoie pas ccedila se construit (Spintank)
La marque a besoin drsquoune
identiteacute
Autres leviers
AdWords
Display
Reacuteseau de contenu
Remarketing (Criteo Google)
Emailing
Newsletter
Facebook Ads
Affiliation
REFERENCEMENT amp MANAGEMENT DES CONTENUS
8
Les 3 grandes familles de critegraveres
Technique amp seacutemantique
Construction du site (HTML5 et microdata) et
performance technique
Domaining (brand)
Ancienneteacute du nom
de domaine
TITLE navigateur et
meacutetadonneacutee Description
URLs
Balises de titres Hx
Attributs ALT
Maillage interne
Editorial
Seacutelection des mots cleacutes
Robustesse de la structuration et IA
Saupoudrage
drsquooccurrences cleacutes
Nommage des
rubriques
Animation eacuteditoriale et freacutequence
drsquoactualisation (content excellence)
Reacuteputation
Nombre de liens reacutefeacuterents (backlinks)
Qualiteacute des liens reacutefeacuterents (backlinks)
Varieacuteteacute des backlinks
Qualiteacute des sites reacutefeacuterents
Reacutegulariteacute et
peacuterenniteacute du maillage
TRUST RANK PAGE RANK amp AUTHOR RANK
REFERENCEMENT amp 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 agrave purin
laquo Internet is a cesspool where false information thrives Brands are the solution not the problem Brands are how you sort out of the cesspool raquo
La marque est la solution
wwwhotel-nantesfr
REFERENCEMENT amp MANAGEMENT DES CONTENUS
11
Source wwwwebmetricsgurucom (2 mai 2012)
La marque est la solution
laquo People use SEO to compensate for a lack of branding or simply having not invested enough in branding raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
12
A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAIcircNE DE PRODUCTION
13
Le reacutefeacuterencement on verra agrave la fin
Scheacutema sur une ideacutee de David Marbac (wwwdavidmarbaccomblog)
Etudes amont IA UX amp Contenu Design Inteacutegration (RWD) Deacuteveloppement (avec plan de marquage) Inteacutegration ou mise en
scegravene des contenus RecettageSEO
Le SEO est un meneur de jeu au service de lrsquoIA de lrsquoUX et de la content strategy
REFERENCEMENT amp MANAGEMENT DES CONTENUS
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
8
Les 3 grandes familles de critegraveres
Technique amp seacutemantique
Construction du site (HTML5 et microdata) et
performance technique
Domaining (brand)
Ancienneteacute du nom
de domaine
TITLE navigateur et
meacutetadonneacutee Description
URLs
Balises de titres Hx
Attributs ALT
Maillage interne
Editorial
Seacutelection des mots cleacutes
Robustesse de la structuration et IA
Saupoudrage
drsquooccurrences cleacutes
Nommage des
rubriques
Animation eacuteditoriale et freacutequence
drsquoactualisation (content excellence)
Reacuteputation
Nombre de liens reacutefeacuterents (backlinks)
Qualiteacute des liens reacutefeacuterents (backlinks)
Varieacuteteacute des backlinks
Qualiteacute des sites reacutefeacuterents
Reacutegulariteacute et
peacuterenniteacute du maillage
TRUST RANK PAGE RANK amp AUTHOR RANK
REFERENCEMENT amp 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 agrave purin
laquo Internet is a cesspool where false information thrives Brands are the solution not the problem Brands are how you sort out of the cesspool raquo
La marque est la solution
wwwhotel-nantesfr
REFERENCEMENT amp MANAGEMENT DES CONTENUS
11
Source wwwwebmetricsgurucom (2 mai 2012)
La marque est la solution
laquo People use SEO to compensate for a lack of branding or simply having not invested enough in branding raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
12
A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAIcircNE DE PRODUCTION
13
Le reacutefeacuterencement on verra agrave la fin
Scheacutema sur une ideacutee de David Marbac (wwwdavidmarbaccomblog)
Etudes amont IA UX amp Contenu Design Inteacutegration (RWD) Deacuteveloppement (avec plan de marquage) Inteacutegration ou mise en
scegravene des contenus RecettageSEO
Le SEO est un meneur de jeu au service de lrsquoIA de lrsquoUX et de la content strategy
REFERENCEMENT amp MANAGEMENT DES CONTENUS
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
9
LE CONCEPT DE LANDING PAGE
10
Source Eric Smith - Ex-CEO de Google cesspool = fosse agrave purin
laquo Internet is a cesspool where false information thrives Brands are the solution not the problem Brands are how you sort out of the cesspool raquo
La marque est la solution
wwwhotel-nantesfr
REFERENCEMENT amp MANAGEMENT DES CONTENUS
11
Source wwwwebmetricsgurucom (2 mai 2012)
La marque est la solution
laquo People use SEO to compensate for a lack of branding or simply having not invested enough in branding raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
12
A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAIcircNE DE PRODUCTION
13
Le reacutefeacuterencement on verra agrave la fin
Scheacutema sur une ideacutee de David Marbac (wwwdavidmarbaccomblog)
Etudes amont IA UX amp Contenu Design Inteacutegration (RWD) Deacuteveloppement (avec plan de marquage) Inteacutegration ou mise en
scegravene des contenus RecettageSEO
Le SEO est un meneur de jeu au service de lrsquoIA de lrsquoUX et de la content strategy
REFERENCEMENT amp MANAGEMENT DES CONTENUS
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
10
Source Eric Smith - Ex-CEO de Google cesspool = fosse agrave purin
laquo Internet is a cesspool where false information thrives Brands are the solution not the problem Brands are how you sort out of the cesspool raquo
La marque est la solution
wwwhotel-nantesfr
REFERENCEMENT amp MANAGEMENT DES CONTENUS
11
Source wwwwebmetricsgurucom (2 mai 2012)
La marque est la solution
laquo People use SEO to compensate for a lack of branding or simply having not invested enough in branding raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
12
A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAIcircNE DE PRODUCTION
13
Le reacutefeacuterencement on verra agrave la fin
Scheacutema sur une ideacutee de David Marbac (wwwdavidmarbaccomblog)
Etudes amont IA UX amp Contenu Design Inteacutegration (RWD) Deacuteveloppement (avec plan de marquage) Inteacutegration ou mise en
scegravene des contenus RecettageSEO
Le SEO est un meneur de jeu au service de lrsquoIA de lrsquoUX et de la content strategy
REFERENCEMENT amp MANAGEMENT DES CONTENUS
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
11
Source wwwwebmetricsgurucom (2 mai 2012)
La marque est la solution
laquo People use SEO to compensate for a lack of branding or simply having not invested enough in branding raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
12
A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAIcircNE DE PRODUCTION
13
Le reacutefeacuterencement on verra agrave la fin
Scheacutema sur une ideacutee de David Marbac (wwwdavidmarbaccomblog)
Etudes amont IA UX amp Contenu Design Inteacutegration (RWD) Deacuteveloppement (avec plan de marquage) Inteacutegration ou mise en
scegravene des contenus RecettageSEO
Le SEO est un meneur de jeu au service de lrsquoIA de lrsquoUX et de la content strategy
REFERENCEMENT amp MANAGEMENT DES CONTENUS
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
12
A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAIcircNE DE PRODUCTION
13
Le reacutefeacuterencement on verra agrave la fin
Scheacutema sur une ideacutee de David Marbac (wwwdavidmarbaccomblog)
Etudes amont IA UX amp Contenu Design Inteacutegration (RWD) Deacuteveloppement (avec plan de marquage) Inteacutegration ou mise en
scegravene des contenus RecettageSEO
Le SEO est un meneur de jeu au service de lrsquoIA de lrsquoUX et de la content strategy
REFERENCEMENT amp MANAGEMENT DES CONTENUS
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
13
Le reacutefeacuterencement on verra agrave la fin
Scheacutema sur une ideacutee de David Marbac (wwwdavidmarbaccomblog)
Etudes amont IA UX amp Contenu Design Inteacutegration (RWD) Deacuteveloppement (avec plan de marquage) Inteacutegration ou mise en
scegravene des contenus RecettageSEO
Le SEO est un meneur de jeu au service de lrsquoIA de lrsquoUX et de la content strategy
REFERENCEMENT amp MANAGEMENT DES CONTENUS
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
14
Source Jeffrey Zeldman (wwwzeldmancom)
Content first Content as the absolute priority
laquo Content precedes design Design in the absence of content is not design itrsquos decoration raquo
REFERENCEMENT amp MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
15
QUEL EST LE TAMIS EDITORIAL DU SITE
BRAINSTORMING GOOGLE KEYWORD TOOL WA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
16
Ce fichier est situeacute agrave la racine
Il est preacutesent et bien renseigneacute avec les deux lignes importantes ci-dessous
User-agent Sitemap httpwwwnomdusitecomsiteindexxml
Le fichier sitemapxml est situeacute eacutegalement agrave la racine
Il peut ecirctre nommeacute avec un autre nom
Outil wwwxml-sitemapscom
Le fichier robotstxt Le fichier sitemapxml
Les fichiers robotstxt et sitemapxml
REFERENCEMENT amp MANAGEMENT DES CONTENUS
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
17
La qualiteacute ergonomique des URLs
Source Des URL laquo tout-terrain raquo courtes et conceptuelles (EPOKHE)
LrsquoURL repreacutesente un deacutetail dans les optimisations laquo on-site raquo Pour obtenir une qualiteacute ergonomique nous les voulons
laquo tout-terrain raquo
conceptuelles
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
REFERENCEMENT amp MANAGEMENT DES CONTENUS18
Supprimer les caractegraveres speacuteciaux ( ) 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 laquo tout-terrain raquo qui restent inchangeacutees au greacute des refontes agrave peacuterimegravetre (IA) constant
1
2
3
4
5
Des URLs de pages laquo tout-terrain raquo
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source CAIRN - Fabricant de structures gonflables
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
Lrsquoeacutetiquette meacuteta title
20
Les eacutetiquettes de page
Elle doit ecirctre composeacutee drsquoenviron 65 agrave 70
signes (en fonction de lrsquousage de certaines
lettres) pour eacuteviter drsquoecirctre tronqueacutee dans les reacutesultats des moteurs
Sa capaciteacute agrave inviter lrsquointernaute agrave passer agrave lrsquoaction sera eacutegalement reacuteduite
La description ne devra pas deacutepasser les 150
signes Au travers de ce petit texte vous devez
seacutedu ire l rsquo internaute et lu i preacutesenter directement des eacuteleacutements diffeacuterenciateurs
Votre eacutetiquette doit faire passer agrave lrsquoaction Autour de vous il y a au moins 9 concurrents
Lrsquoeacutetiquette meacuteta description
REFERENCEMENT amp MANAGEMENT DES CONTENUS
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
21
La reacutedaction du titre navigateur et de la description
65
150
La preacutesence de mots cleacutes dans le titre au premier chef la description doit apporter un compleacutement drsquoinformation
Des mots cleacutes positionneacutes en amont de la balise de titre navigateur
1
1
REFERENCEMENT amp MANAGEMENT DES CONTENUS
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
22
Que dit WordPress
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT amp MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
23
Les liens de site naturels et payants
REFERENCEMENT amp MANAGEMENT DES CONTENUS
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
24
La compleacutementariteacute orienteacutee sur la tacircche
REFERENCEMENT amp MANAGEMENT DES CONTENUS
1 Titre AdWords2 Promesse3 Les tacircches principaleslaquo controcirclables raquo via les sitelinks AdWords
4 Titre navigateur optimiseacute avec 2 KW5 Description informative avec lrsquoideacutee des 62 parcours6 Les grandes rubriques du site nonmoins laquo controcirclables raquo via les sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
25
Facebook Open Graph META Tags
REFERENCEMENT amp MANAGEMENT DES CONTENUS
ltmeta property=oglocale content=fr_FRgt
ltmeta property=ogtitle content=2013 lrsquoanneacutee du changement dans
les marcheacutes publics pour les PME gtltmeta property=ogdescription content=France Marcheacutes vous
preacutesente le guide pour faciliter lrsquoaccegraves des TPE et PME aux marcheacutes publics de lamp039OEAP et le guide de la deacutemateacuterialisation du
MEDEFgt
ltmeta property=ogurl content=httpwwwfrancemarchescomblog20122013-annee-changement-pmegt
ltmeta property=ogsite_name content=France Marcheacutesgt
ltmeta property=ogtype content=articlegtltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212logo-oeap-e1359037423764jpggt
ltmeta property=ogimage content=httpwwwfrancemarchescom
blogwp-contentuploads201212Guide-Dematerialisationjpggt
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
26
La structuration de lrsquoinformation
Un titre H1 par page avant que le HTML5 change la conception de la page web en tant qursquouniteacute de contenu
Un titre H1 diffeacuterencieacute page par page
Une parentaliteacute respecteacutee
1
2
3
LE REFERENCEMENT
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
27
laquo Faire partie raquo du Web (maillagenetlinking)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
28
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
Exemple drsquoun lien optimiseacute naturellement
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
Exemple drsquoun lien trop optimiseacute sans notion de marque
lta href=httpwwwredpointfrgtRedpoint - Cabinet conseil UX SEO et marketingltagt
La sur-optimisation ne srsquoappreacutecie pas seulement de maniegravere unitaire mais surtout dans le profil de liens drsquoun site web
Structure du lien (destination + intituleacute)
Destination du lien Intituleacute du lien
lta href=httpwwwredpointfrgtConsultant SEO Nantes - Reacutefeacuterencement 44ltagt
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
29
Qursquoest-ce qursquoun lien optimiseacute
REFERENCEMENT amp MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L30
QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE
Source Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
31
Le syndrome du cliquez ici
Source Patricia Gallot-Lavalleacutee (wwwstrategy-interactivecom)
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
32
Travaillez vos liens comme vos titres de pages
Ce que dit lrsquoergonome
Evitez les liens de navigation mystegravere
(lrsquointernaute ne doit pas douter de lrsquoissue de son
clic)
Inteacutegrez vos liens dans
vos contenus car ils
seraient plus cliqueacutes
Augmentez la taille reacuteelle des liens
Ce que dit le
reacutefeacuterenceur
Optimisez vos liens
avec des occurrences cleacutes informatives
Optez pour des libelleacutes de preacutefeacuterence
explicites
Obtenez des liens
dans des zones de contenus (laquo Beware of
sitewide linking raquo)
Ce que dit lrsquoexpert en
accessibiliteacute
Nommez vos liens de
maniegravere explicite (hors contexte)
Preacutefeacuterez des libelleacutes HTML (lrsquoattribut TITLE
est une beacutequille inutile
drsquoailleurs en SEO)
Limitez la taille des liens agrave 80 signes (hors
cas particuliers)
REFERENCEMENT amp MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
33
Le lien est une interface de navigation intuitive
Sources Ameacutelie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Prioriteacute agrave la simpliciteacute - Pearson)
Le lien sous-tend un clic dont les deux versants physique et mental doivent ecirctre pris en compte
Drsquoailleurs la difficulteacute physique lieacutee au clic (tregraves lieacutee agrave la loi de Fitts) est probablement moins difficile que son pendant mental
REFERENCEMENT amp MANAGEMENT DES CONTENUS
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
REFERENCEMENT amp MANAGEMENT DES CONTENUS34
SEO SpyGlass (wwwlink-assistantcomseo-spyglass)
Ahrefs (httpahrefscom)
Advanced Link Manager (wwwadvancedlinkmanagercom)
Open Site Explorer (wwwopensiteexplorerorg)
Link Diagnosis (wwwlinkdiagnosiscom)
Webmaster Tool (wwwgooglecomwebmasters)
1
2
3
4
5
Connaicirctre ses liens reacutefeacuterents
6
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
REFERENCEMENT amp MANAGEMENT DES CONTENUS35
Un lien fait partie drsquoun contexte
Sources httpwwwjeromewebnetseo18813-cours-google-analytics et httpwwwicademiecomle_clubp=1910
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
36
Le reacutefeacuterencement invisible et keywordless
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
REFERENCEMENT amp MANAGEMENT DES CONTENUS37
Ecirctes-vous precirct agrave devenir un eacutediteur de contenus
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
REFERENCEMENT amp MANAGEMENT DES CONTENUS38
La table des eacuteleacutements de la strateacutegie de contenu
Source httpsearchenginelandcomseotable
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
REFERENCEMENT amp MANAGEMENT DES CONTENUS39
Ecirctes-vous precirct pour la dieacuteteacutetique eacuteditoriale
Souvent les clients souhaitent atteindre la masse critique (laquo critical mass raquo) sur la base des mythes suivants
Plus jrsquoai du contenu meilleures seront mes positions sur Google
Plus jrsquoai du contenu plus jrsquoapporterai de la valeur agrave mon audience
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
REFERENCEMENT amp MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence
Les diffeacuterents types drsquoappacirct informationnel poleacutemique creacuteatif humoristiqueCoca-Cola Content 2020 Part One (wwwyoutubecomwatchv=LerdMmWjU_E)
laquo The role of content excellence is to behave like a ruthless editor raquo
Lrsquoexcellence eacuteditoriale passe par la creacuteation drsquoideacutees contagieuses qui ne peuvent ecirctre controcircleacutees (liquid) et qui associent des objectifs business la marque et la satisfactionlrsquointeacuterecirct client (linked)
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L41 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE
Qui prendra le leadership
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L42 REFERENCEMENT amp MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS EcircTRE PERCU COMME UN CENTRE DE COUcircT
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L43 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwantseyeviewcom90-9-1-principle
La pyramide de lrsquoengagement utilisateur
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L44 REFERENCEMENT amp MANAGEMENT DES CONTENUS
Source wwwaltimetergroupcom
Les 5 phases de maturiteacute du content management
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
REFERENCEMENT amp MANAGEMENT DES CONTENUS45
Tecircte et longue traicircne
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
REFERENCEMENT amp MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le mecircme panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
47
EST-IL POSSIBLE DE NETTOYER GOOGLE
Les techniques de nettoyage recouvrent la production de contenus positifs le netlinking les menaces davocats et attaques en justice
Choisir son camp
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LES FONDAMENTAUX DE LrsquoERGONOMIE
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
49
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
NrsquoAYANT PAS DE POINTS COMMUNS
Source httplibrairieimmaterielfrfrread_book9782212132151ch3b
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
50
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Une page qui souffre de problegravemes de proximiteacute manque geacuteneacuteralement de zones de respiration
Nous avons tendance agrave consideacuterer que les eacuteleacutements proches physiquement entretiennent des points communs
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
51
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source Google+ Local
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
52
La loi de proximiteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
53
La loi de similariteacute (theacuteories de la Gestalt)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source httpblogexcilyscom20100913optimiser-lergonomie-de-son-application-web
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L54 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES DrsquoINTEGRER MENTALEMENT
SON CONTENU
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
55
La loi de proximiteacute temporelle
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources Blogs de Freacutedeacuteric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L56 LES FONDAMENTAUX DE LrsquoERGONOMIE
UNE CIBLE EST DrsquoAUTANT PLUS RAPIDE A ATTEINDRE QUrsquoELLE EST PROCHE ET GRANDE
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
57
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwintuitinet et Slideshare (reacutesultats de recherche)
Lrsquoexemple du label qui agrandit la zone de clic est appreacuteciable pour les internautes ayant une faible dexteacuteriteacute
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
58
La loi de Fitts
LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwvoyages-sncfcom
La zone adjacente au libelleacute et son icocircne est cliquable
Toute la zone adjacente du libelleacute est cliquable
1
2
2
1
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
59
La loi de Fitts (appliqueacutee au SEO)
LES FONDAMENTAUX DE LrsquoERGONOMIE
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre cliquez ici
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole CESI
Pour consulter nos appels drsquooffre visitez le site de lrsquoeacutecole drsquoingeacutenieurs CESI
1
2
3
4
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L60 LES FONDAMENTAUX DE LrsquoERGONOMIE
LrsquoAFFORDANCE EST LA CAPACITE DrsquoUN OBJET A SUGGERER SA PROPRE UTILISATION
Le concept drsquoaffordance
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
61
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se servant des eacuteleacutements adjacents
Lrsquoaffordance de cliquabiliteacute est donneacutee par lrsquoadjonction drsquoun eacuteleacutement (la barre rouge) et drsquoune nouvelle forme (menu deacuteroulant)
1
2
Source wwwmulticitycitroenfr
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
62
Les affordances de navigation
LES FONDAMENTAUX DE LrsquoERGONOMIE
Affordance donneacutee par la forme et la couleur1
Source Slideshare (reacutesultats de recherche)
1
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
63
Les affordances drsquointeraction
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Lrsquoespace de connexion sur le site wwwfrancemarchescom (v1) manque drsquoaffordance mecircme si le libelleacute reste explicite hors contexte
1
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
64
Les affordances erroneacutees
LES FONDAMENTAUX DE LrsquoERGONOMIE
Au survol toute la zone semble cliquable alors que seul le bouton drsquointeraction lrsquoest Crsquoest donc une affordance erroneacutee
1
Source wwwmulticitycitroenfr
1
Source wwwchateaudegoulainefrle-chateau
Lrsquoaffordance de cliquabiliteacute est atteinte si la somme des affordances de chaque dimension (forme couleur libelleacute localisation adjonction drsquoeacuteleacutements indiquant la preacutesence drsquoun lien) de lrsquoobjet est suffisante
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L65 LES FONDAMENTAUX DE LrsquoERGONOMIE
Monabanqcom (loi de Fitts et affordances)
Source wwwmonabanqcom et Reacutefeacuterentiel AccessiWeb 21 Consultation
Lrsquoanimation augmente la charge informationnelle drsquoautant qursquoelle ne srsquoarrecircte pas Lrsquoutilisateur nrsquoa pas de le controcircle du contenu en mouvement
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L66 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
Source httpbeextendfrmagazinehtml
Le point focal par la variation typographique
Le point focal par lrsquoillustration et la photographie
Le point focal par lrsquointeraction
Le point focal par lrsquoespace neacutegatif
1
2
3
4
Les ressorts de lrsquoincitation agrave lrsquoaction
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L67 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE LrsquoERGONOMIE
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L70 LES FONDAMENTAUX DE LrsquoERGONOMIE
Le nombre magique drsquoAlan Baddeley
CITEZ LES NOMS DES SEPT NAINS
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L71 LES FONDAMENTAUX DE LrsquoERGONOMIE
7 +- 2 ELEMENTS (EMPAN DE 5 agrave 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 10 DANS LrsquoARBORESCENCE Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION
LrsquoOBJECTIF DE CETTE REFERENCE EST DrsquoEVITER DE SURCHARGER LrsquoINTERFACE LA LOI DE HICK-NYMAN DEVELOPPE LrsquoIDEE QUrsquoIL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT DrsquoELEMENTS (cf LE PARADOXE DU CHOIX)
Le nombre magique de Miller vs loi de Hick-Nyman
Source wwwbraillenetorgaccessibiliteAccessiWeb_CMS_10guide_accessiwebguide-accessiweb-ref-accessiwebhtml et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L72 LES FONDAMENTAUX DE LrsquoERGONOMIE
0650862015
Le nombre magique drsquoAlan Baddeley
Sources Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
73
4Le nombre magique est
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
74
La regravegle des 3 clics
LES FONDAMENTAUX DE LrsquoERGONOMIE
1
Comprenez-vous les libelleacutes de second niveau de la 2egraveme entreacutee
La regravegle des 3 clics laisse de cocircteacute la difficulteacute mentale lieacutee au clic pour se focaliser sur la difficulteacute physique Cette regravegle est deacuteleacutetegravere
1
Source wwwsigmafr
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
75
DO YOU SPEAK USER
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
76
Le logo en haut agrave gauche standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwjuwifr
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
77
Le breadcrumb agrave droite standard ou convention
LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwcarrepointucom
Un fil drsquoAriane situeacute agrave gauche
Un fil drsquoAriane composeacute de libelleacutes dont la taille reacuteelle est petite (cliquabiliteacute plus reacuteduite)
Un fil drsquoAriane qui manque de respiration
1
2
3
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LES FONDAMENTAUX DE LrsquoERGONOMIE78
Source Jakob Nielsen
Un standard est un principe utiliseacute par plus de 80 des sites
Standard versus convention
Une convention est un principe lorsque 50 agrave 79 des sites lrsquoutilisent
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LES FONDAMENTAUX DE LrsquoERGONOMIE79
Le site capitalise sur lapprentissage interne (coheacuterence du site)
Les conventions internes et externes priment
Le site capitalise sur lapprentissage externe (localisation vocabulaire)
dans la localisation des objets
(surtout pour la navigation)
dans les intituleacutes le vocabulaire utiliseacute
dans les interactions (style des liens comportement des objets)
Panier en haut agrave droite
Convention de vocabulaire
(Accueil Panier Plan du site Contact)
Texte souligneacute = lien
Navigation en haut ou agrave gauche
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L80 LES FONDAMENTAUX DE LrsquoERGONOMIE
LE CAS DE LrsquoATTRIBUT PLACEHOLDER
Lrsquoattribut placeholder change les conventions
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L81 LES FONDAMENTAUX DE LrsquoERGONOMIE
Sources wwwagence-apifr wwwfrancemarchescom
La prise de focus change avec placeholder
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L82 LES FONDAMENTAUX DE LrsquoERGONOMIE
Source wwwstpofr
Une affordance drsquointeraction sur placeholder
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L83 LES FONDAMENTAUX DE LrsquoERGONOMIE
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
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 reacuteelle etou virtuelle des objets de navigation et drsquointeraction a-t-elle eacuteteacute augmenteacute de maniegravere optimale
Les libelleacutes des objets de navigation et drsquointeraction (liens boutons) sont-ils suffisamment explicites pour que lrsquointernaute ne doute pas de lrsquoissue de son clic
1
2
3
4
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
86
Les objets (navigation interaction) sont-ils affordants
Lrsquoincitation agrave lrsquoaction est-elle geacutereacutee par le point focal
Lrsquointerface capitalise sur lrsquoapprentissage interne et externe
Y-a-t-il un nombre reacuteduit drsquoeacuteleacutements par niveau de navigation
Les call-to-action sont-ils situeacutes au-dessus du fold
Le site est-il bien rangeacute
5
6
7
8
Quelques questions agrave se poser
LES FONDAMENTAUX DE LrsquoERGONOMIE
9
10
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
87
Les outils drsquoanalyse de conception et drsquoeacutevaluation UX
LES FONDAMENTAUX DE LrsquoERGONOMIE
Lrsquoobservation
Les personas
Les focus groups
Eyetracking
Les critiques drsquoexperts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils drsquoeacutevaluation
Les outils de conception
Les outils drsquoanalyse
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
88
Tri des cartes
LES FONDAMENTAUX DE LrsquoERGONOMIE
TRI DES CARTES OUVERT vs FERME
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
89
Test users
LES FONDAMENTAUX DE LrsquoERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
90
Test user La Veacutelodysseacutee
LES FONDAMENTAUX DE LrsquoERGONOMIE
Tacircches Exemples de sceacutenariiPage ou
fonctionnaliteacute testeacutee
Compreacutehension du contexte de la page
drsquoaccueil
laquo Drsquoabord sans aller ailleurs en regardant cette premiegravere page pouvez-vous me dire ce que
propose La Veacutelodysseacutee raquo
Contenu de la page drsquoaccueil
Chercher un parcours agrave veacutelo pour une journeacutee
laquo Imaginons que vous souhaitez faire une balade agrave veacutelo drsquoune journeacutee avec 3 amis Vous avez entendu parler de La Veacutelodysseacutee Vous entreprenez de chercher une balade pour la
journeacutee pregraves de chez vous raquo
Navigation dans le catalogue des
parcours
Regarder si une page parcours convient
laquo Votre balade est choisie Vous deacutecidez de la planifier et de trouver un endroit pour
deacutejeuner raquo
Contenu de la page parcours
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
91 LES FONDAMENTAUX DE LrsquoERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING DISCOVERY EXPLORATION LEARNING
Source httpstwittercomlynn_mckee
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LES IMAGES
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
93
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 11 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE
(wwwsigmafr)
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
94
Des pecadilles qui manquent de sens
LES IMAGES
Source wwwverygoodfr et wwwnetapsyscom
backgroundurl(imagemenumenu_netapsys_accueil2jpg)
ltimg src=uploadhomecorbieres_cendrillon10jpg align=leftgt
2
1
1
2
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
95
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 12 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE ALTERNATIVE
EST-ELLE VIDE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
96
Reacutefeacuterentiel AccessiWeb 21
LES IMAGES
Critegravere 13 [Bronze]
POUR CHAQUE IMAGE PORTEUSE DrsquoINFORMATION AYANT UNE ALTERNATIVE TEXTUELLE CETTE
ALTERNATIVE EST-ELLE PERTINENTE
Source httpwwwbraillenetorgaccessibilitereferentiel-aw21indexphpimages
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
97
Cette leacutegende est-elle pertinente
LES IMAGES
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
98
La leacutegende sur le logo (page drsquoaccueil)
LES IMAGES
2
alt=FAFIEC OPCA ndash Organisme paritaire collecteur agreacuteeacute de lrsquoingeacutenierie de lrsquoinformatique des eacutetudes du conseil des foires et salons et des traductions
Quel attribut ALT pour lrsquoimage-lien sur le logo dans les pages inteacuterieures
1
1
Source wwwfafiecfr
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
99
La leacutegende sur le logo (pages inteacuterieures)
LES IMAGES
lta href=gt ltimg src=logopng alt=Retour agrave laccueil - OPCA FAFIEC gtltagt
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L101 LES IMAGES
La longueur des alternatives textuelles est infeacuterieure ou eacutegale agrave 80 caractegraveres ( critegraveres 103 du baromegravetre Temesis Opquast)
Lalternative textuelle indiquant laction associeacutee agrave leacuteleacutement ou reproduisant linformation veacutehiculeacutee par leacuteleacutement devra ecirctre formuleacutee de faccedilon agrave ecirctre la plus concise possible Une limite situeacutee entre 80 et 120 caractegraveres semble convenir agrave une manipulation aiseacutee de ces informations Au-delagrave il est obligatoire de sinterroger sur la neacutecessiteacute de lutilisation dune description longue
1 httptemesis-emakinaopquastnetbarometerstourismecriteria
2 Reacutefeacuterentiel Geacuteneacuteral drsquoAccessibiliteacute pour les Administrations RGAA - Annexe 1 Critegraveres de succegraves (page 3)
1
2
TemesisOpquast amp RGAA
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
102
Le cas de la description deacutetailleacutee
LES IMAGES
Une description deacutetailleacutee peut ecirctre inseacutereacutee via
un attribut LONGDESC qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee lrsquoindication dans lrsquoattribut ALT de lrsquoemplacement dans la page de la description deacutetailleacutee
un lien adjacent agrave lrsquoimage qui contient lrsquoadresse drsquoune page ou drsquoun emplacement dans la page contenant la description deacutetailleacutee
Sources wwwveoliacomhttpwwwbraillenetorgaccessibilitereferentiel-aw21glossairephpmDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L103 LES IMAGES
COMBIEN DE TYPES DrsquoALTERNATIVES TEXTUELLES
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L104 LES IMAGES
Les types drsquoimages et alternatives associeacutees
Les types drsquoimage Les alternatives associeacutees21Lrsquoimage porteuse drsquoinformation
Lrsquoimage de deacutecoration
Lrsquoimage-lien
La leacutegende ALT doit ecirctre pertinente
Lrsquoattribut ALT doit rester vide
Lrsquoalternative doit permettre la
compreacutehension de la fonction et de la
destination du lien
Lrsquoimage-captcha Lrsquoalternative doit permettre drsquoidentifier la
nature et la fonction de lrsquoimage
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LrsquoERGONOMIE DES CONTENUS
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
106
La lecture sur le web (un meacutedia drsquointeraction)
Lean forward (actif)(desktop
tablettes smartphones)
Lean back (passif)(teacuteleacutevision livres
magazines journaux papier)
LrsquoERGONOMIE 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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
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 lineacuteaire)
Chaque page est un tout La page est un ensemble qui se suffit agrave lui-mecircme
LrsquoERGONOMIE DES CONTENUS
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
108
Source Blueglass
80 des internautes lisent les titres
LrsquoERGONOMIE DES CONTENUS
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L109
Source Bernard Poulet
La fin des ensembles
Des meacutedias de masse lrsquoeacuteconomie de lrsquoattention est passeacutee agrave des masses de meacutedias
Contrairement agrave ce que pense Rupert Murdoch qui exprime un faible inteacuterecirct pour les lecteurs laquo occasionnels raquo et laquo non loyaux raquo que Google amegravene et qui consomment de la laquo bande passante raquo les jeunes utilisateurs naccegravedent plus agrave un ensemble mais agrave un article en particulier Ils picorent des liens partageacutes sur les reacuteseaux agrave la recherche drsquoune uniteacute de contenu
LrsquoERGONOMIE DES CONTENUS
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L110
Source Outsell
Lrsquoimportance du titre 8 mots maximum
LrsquoERGONOMIE DES CONTENUS
Sur 10 personnes 2 seulement liront votre contenu tandis que 8 se satisferont du titre Un titre explicite magneacutetique est donc de premiegravere importance
Dans le domaine de lrsquoemailing des eacutetudes ont drsquoailleurs montreacute que 50 agrave 60 des titres les plus efficaces se composent de 8 mots maximum
Une eacutetude du cabinet conseil Outsell souligne eacutegalement que 44 des visiteurs de Google News regardent les titres sans aller sur les sites des journaux Pregraves drsquoun internaute sur deux ne lit que les titres sans cliquer ce qui deacutemontre lrsquoimportance de cet eacuteleacutement souvent deacuteporteacute hors de son support drsquoorigine
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
L111 LrsquoERGONOMIE 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 httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LA LECTURE SUR LE WEB112
On parcoure explore scanne et survole avant de
113
Source httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
113
Source httpwwwcxpartnerscoukthoughtsthe_myth_of_the_page_fold_evidence_from_user_testinghtm
La notion de fold
LrsquoERGONOMIE DES CONTENUS
En ergonomie une eacutetude de CX Partners aupregraves de 800 utilisateurs nous montre que mecircme si le pli drsquoune page (fold en anglais) nrsquoest pas un frein agrave lrsquoexploration moins il y a de contenu au-dessous du pli plus lrsquoutilisateur sera encourageacute agrave explorer la page
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
114
Source Universal McCann - Juin 2008
La notion de fold
LrsquoERGONOMIE DES CONTENUS
laquo Plus de la moitieacute des internautes consultent du contenu en dehors de leurs sites dorigine raquo
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
115
Ougrave se posent les yeux des internautes
LrsquoERGONOMIE DES CONTENUS
Les eacutetudes deyetracking sont formelles le texte attire davantage lattention que les images 78 des fixations oculaires se font sur le texte et 22 des fixations oculaires se font sur les images
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LrsquoERGONOMIE DES CONTENUS116
LrsquoECRITURE WEB EST UN VERITABLE COMBAT
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
117
Source 1 Steve Krug (Je ne veux pas chercher) - 2 Gerry McGovern
Le bavardage inutile
LA LECTURE SUR LE WEB
laquo Wasting your customers time is the biggest sin you can commit on the Web raquo
laquo Le bavardage inutile repeacuterable selon Steve Krug par la petite voix inteacuterieure qui dit laquo blablabla blablabla blablabla raquo tout en lisant est-il supprimeacute raquo
1
2
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
118
Source Sigma (wwwsigmafr)
Le bavardage inutile
LA LECTURE SUR LE WEB
La maicirctrise et lrsquooptimisation de votre systegraveme drsquoinformation est un enjeu primordial Linfogeacuterance vous libegravere de toutes les contraintes de gestion et drsquoeacutevolution de votre systegraveme drsquoinformation
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LrsquoERGONOMIE DES CONTENUS119
Le texte est-il bien deacutecoupeacute (aeacutereacute) en paragraphes
Les paragraphes ont-ils une longueur infeacuterieure agrave 60 mots
Le nombre de mots par ligne de texte varie-t-il de 8 agrave 12 sans toutefois deacutepasser un maximum de 15 soit un empan de 40 agrave 70 signes maximum
La longueur des phrases varie-t-elle de 12 agrave 20 mots
Les phrases dune longueur de 25 agrave 30 mots peuvent-elles ecirctre reacuteduites pour passer sous la limite des 20 mots
1
2
3
4
5
Source Crawford Kilian - Writing for the Web (httpcrofsblogstypepadcom)
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LrsquoERGONOMIE DES CONTENUS120
La largeur drsquoune ligne de texte varie-t-il de 50 agrave 75 signes 1
Source Baymard - Readability the Optimal Line Length (httpbaymardcomblogline-length-readability)
Une ligne de texte trop longue gecircne la lecture car elle empecircche davoir une vision globale entre le deacutebut et la fin de la ligne Une ligne de texte trop courte aura tendance agrave faire voyager loeil du lecteur et ainsi briser le rythme de lecture
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LrsquoERGONOMIE DES CONTENUS121
Source Smashing Magazine (httpwwwsmashingmagazinecom20090820typographic-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
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LrsquoERGONOMIE DES CONTENUS122
Sources AccessiWeb hors cas particuliers pour les langues chinoises japonaises et coreacuteennes (wwwbraillenetorgaccessibilitereferentiel-aw21) et RGAA (wwwrgaanetLargeur-des-blocs-de-texteshtml)
Critegravere 1011 [OR] Pour chaque page Web les blocs de texte ont-ils une largeur infeacuterieure ou eacutegale agrave 80 caractegraveres
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LrsquoERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LrsquoERGONOMIE DES CONTENUS124
Source Douglas Bowman (httpstopdesigncom v3)
2 Un empan de 12 mots en moyenne
Un empan de 18 mots en moyenne1
Quelques conseils sur les paragraphes
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LrsquoERGONOMIE DES CONTENUS125
Sources wwwergologiquecomconseilsconseilsphpid_tip=818 et httpwwwnngroupcomarticlestop-10-mistakes-web-design
Evitez les murs de texte
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LrsquoERGONOMIE DES CONTENUS126
Source wwwergologiquecomconseilsconseilsphpid_tip=818
Ferrez vos contenus agrave gauche
Dun point de vue de lisibiliteacute des eacutetudes seacuterieuses deacutemontrent quun texte en drapeau est plus accessible agrave lœil
Les fins de lignes servent de repegravere visuel et fatigue moins le lecteur
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LrsquoERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR NON
UNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT QUI PREacuteSENTE DE LINFORMATION ET PERMET DE NAVIGUER UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMP PAGE QUI NE SONT QUUNE SORTE DINTRODUCTION PREacuteCEacuteDANT LA VEacuteRITABLE PAGE DACCUEIL
Une vraie page daccueil est une page qui sert qui preacutesente de linformation et permet de naviguer Une page daccueil nest pas une splash page ou jump page qui ne sont quune sorte dintroduction preacuteceacutedant la veacuteritable page daccueil
DES SACCADES JUSQUrsquoA 15 LETTRES PUIS
DES FIXATIONS
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
LrsquoERGONOMIE DES CONTENUS128
La pyramide inverseacutee
La pyramide inverseacutee deacutebute par les informations essentielles pour aller vers les deacutetails en tenant compte des lois de proximiteacute
la loi de proximiteacute temporelle (parler des eacutevegravenements agrave 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 eacute geacuteographique
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
httpwwwflickrcomphotoscocolinda385860049
DES QUESTIONS
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
130
CE DOCUMENT A ETE REALISE PAR
Cabinet conseil speacutecialiseacute dans les
eacutetudes l accompagnement et la
formation sur les meacutetiers suivants c o n c e p t i o n m a icirc t r i s e d o u v r a g e
reacutefeacuterencementcontenus analytics et marketing 20
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
CONTACT
Arnaud BRIANDConsultant associeacute
06 50 86 20 15
abriandredpointfr
Sylvain GUEGUENConsultant associeacute
06 08 88 70 60
sgueguenredpointfr
DECOUVREZ NOS AUTRES DOCUMENTS
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint
Tous droits reacuteserveacutes Redpoint - Reproduction interdite sans accord preacutealable131
redpointfr
facebookcommadebyredpoint
slidesharenetmadebyredpoint