Tenir compte de tous ses utilisateurs pour optimiser son business Conférence "Matinée pour comprendre" qui s'est déroulée chez Linagora le 28 avril 2016, avec Jean-Philippe Simonnet, responsable internet chez Centre-Inffo et expert accessibilité, et Christophe Clouzeau, ‎UX Strategist Digital chez NEOMA-Interactive by Linagora. UX et Accessibilité sont complémentaires sur le plan des usages et des accès,et tout aussi communs via leur orientation privilégiant l'utilisateur final.

1. 1
Linagora AgenceNeoma
Tenir compte de tous ses utilisateurs
pour optimiser son business
M
atinée
pour com
prendre
UX & Accessibilité
Les clés pour réussir
28 avril 2016

2. 2
Experte en solutions
Open Source
Stratégie,
UX et Design

3. 3
?
© Oscar Keys

4. 4
UX et Accessibilité
complémentaires : Usages VS. Accès
communs : Orientés utilisateurs
© Oscar Keys

5. 5
1/ L’UX
2/ L’accessibilité numérique
3/ UX = utilisateurs (comme l’accessibilité)
4/ Règles UX et Accessibilité
Cas pratiques
TEST

6. 6
Qu’est-ce que l’UX ?
user experience

7. 7

8. 8

9. 9

10. 10

11. 11

12. 12

13. 13

14. 14

15. 15

16. 16

17. 17

18. 18

19. 19

20. 20
Affordance :
Capacité d’un objet
ou d’une caractéristique
à suggérer son utilisation

21. 21
Ergonomie
(grec)
Ergon : travail
Nomos : lois, règles

22. 22
Définition de l’ergonomie :
« étude scientifique
de la relation entre l’homme et
ses moyens,
ses méthodes
et ses milieux de travail. »

23. 23
UX :
« User eXperience »

24. 24
Interfaces :
organisation visuelle
cohérence
compréhension
perceptibilité
typographie
mise en page
interactivité
utilisabilité
hiérarchie éditoriale

25. 25
Objectif :
S’adresser au cerveau fainéant
(car il l’est déjà)
-> l’instinct machinal des internautes
(et leurs attentes + usages)
EST la base de la réflexion

26. 26
Éviter ça

27. 27
L’accessibilité
numérique

28. 28
Accessibilité
Accès à :
•Un bus
•Un musée
•Un parc
•Un bureau de Poste

29. 29
Perception et lisibilité
Contrastes

30. 30
Accessibilité numérique
Permettre à toute personne,
qu’elle que soit sa déficience,
d’accéder au contenu et au service proposé.
Cible : 15% des internautes dans le monde

31. 31
Accessibilité numérique
1999 - Monde
W3C émet les recommandations d’accessibilité web (WCAG)
Loi 11 février 2005 en France
« Pour l'égalité des droits et des chances, la participation et
la citoyenneté des personnes handicapées »
2009 – France (décret)
Application obligatoire du RGAA pour les sites web publics
(Référentiel Général d’Accessibilité pour les Administrations)
Aujourd’hui : RGAA v3.0

32. 32
Accessibilité numérique
https://www.youtube.com/watch?v=fzgxTGG7hKE

33. 33
Accessibilité numérique -> pour tous
Nous avons tous besoin d’accessibilité :
• en tant que personnes valides : pour travailler dans un
train, en extérieur durant une journée ensoleillée, etc. ;
• en situation temporaire d’invalidité (bras cassé, etc.) ;
• en situation de handicap.
Pour les moteurs de recherche aussi.

34. 34
Accessibilité numérique

35. 35
Accessibilité numérique

36. 36
Visuel
Auditif
Moteur
Cognitif Processus COGNITIFS
psychologie/capacités dans les domaines :
• perceptifs
• sensori-moteur
• du raisonnement
• de la mémoire
• du langage
• de l’espace
Accessibilité numérique

37. 37
(vaste) Champs d’actions

38. 38
Maintenabilité Coût Interopérabilité
Plutôt que d’adapter des services
et des interfaces aux handicaps,
on préfère la notion de conception universelle.
Accessibilité numérique

39. 39
UX, RWD et accessibilité numérique
RGAA 2 et 3 - Zoom 200%

40. 40
UX = Connaître ses utilisateurs
Focus cible

41. 41
Placer l’humain
• Considérer l’homme dans le rapport homme-machine
-> lorsque cela ne fonctionne pas du côté des utilisateurs,
c’est parce qu’il y a un écart important entre
la vision du concepteur et celle de l’utilisateur final
• Conception centrée utilisateur
UX-design, UX-conception, UX-ergonomie
-> se mettre constamment dans la peau de votre internaute

42. 42
Conception
centrée utilisateur
Satisfaire l’internaute
pas les concepteurs

43. 43
UI design
Fonction
« ça marche »

44. 44
Usability design
Action
« ça marche mieux »

45. 45
Émotion
« ça marche mieux
et ça me fait dire Wahou ! »
UX design

46. 46
Utilisabilité
• Un projet interactif réussi est un projet :
– utile
– utilisable
– utilisé
Répondre à un besoin : l’internaute vient pour une raison
ou pour quelque chose
Faciliter la satisfaction du besoin : l’internaute reste et trouve
ce qu’il veut le plus aisément que possible
Prolonger la satisfaction du besoin : l’internaute revient
car il trouve son bonheur

47. 47
Exemple : Leader Vs. Challenger
Comment CapitainTrain triple ses ventes chaque année ?
En misant sur l’expérience client.
http://lareclame.fr/124974-parole-annonceur-capitaine-train-florent-darrault

48. 48
Les théories
Les théories de Gestalt
La loi de Fitts La loi de Hick
Le nombre de Miller
- la loi de proximité
(macro/micro)
- la loi de similarité
(taille, forme, couleurs)
- Une cible est d’autant plus facile
et rapide à atteindre
qu’elle est proche et grande
- mémoire de travail :
Au-delà de 7 éléments, dans notre
tête cela s’embrouille (+/- 2)
- Le temps nécessaire pour se décider
croit proportionnellement au
nombre et à la complexité des
options proposées.

49. 49
Gestalt : loi de proximité

50. 50
Gestalt : loi de proximité

51. 51
Gestalt : loi de proximité

52. 52
Gestalt : loi de proximité

53. 53
Gestalt : loi de proximité

54. 54
Gestalt : loi de proximité

55. 55
Gestalt : loi de similarité (taille)

56. 56
Gestalt : loi de similarité (forme)

57. 57
Gestalt : loi de similarité (couleur)

58. 58
Gestalt : loi de similarité - menu
Chacun des éléments suggère la même fonction d’achat :
- la typographie,
- la couleur,
- le design de même nature

59. 59
Gestalt : loi de similarité - architecture

60. 60
Gestalt : loi de similarité - produits

61. 61
Gestalt : loi de similarité - gabarit

62. 62
Gestalt : loi de continuité
Principe addictif : la suite d’éléments affichés nous invite à
continuer le déroulement des prochaines images.
BONUS

63. 63
Fitts : cible facile
Grossissez vos éléments cliquables.

64. 64
Fitts :
cible facile
Check-box,
Sous-menus :
l’icone & l’intitulé
sont cliquables

65. 65
Fitts : cible facile
Les éléments cliquables doivent être « proches »

66. 66
Miller : 7 (?)

67. 67
Hick :
temps de décision
3 choix exceptionnels !
Sinon, 3 autres à découvrir.

68. 68
Des questions ?

69. 69
Le concept d’affordance
• Capacité d’un objet ou d’une caractéristique à suggérer son
utilisation
• Sur les écrans, l’apparence d’un objet suggère immédiatement
ses possibilités d’action
– Forme
– Couleur
– Libellé
– Localisation dans l’interface
– Adjonction d’éléments indices
– Comportement : NON

70. 70
Vous pouvez interagir avec moi
Bouton - affordance
VALIDERVALIDER

71. 71
VALIDERVALIDER
Bouton – affordance - accessibilité
Vous pouvez interagir avec moi

72. 72
RechercherMots-clef
Moteur de recherche
Vous pouvez interagir avec moi

73. 73
Menu déroulant
Windows Seven
Windows Office
Vous pouvez interagir avec moi

74. 74
Nom de la personne
Cette personne est l’auteur d’un ouvrage mondialement
connu que vous devez absolument avoir parmi vos livres
de chevet. Elle…
En savoir +
Zone cliquable
Vous pouvez interagir avec moi

75. 75
Vous pouvez interagir avec moi
L’information ne doit jamais être véhiculée par la couleur seule.

76. 76
Vous pouvez interagir avec moi

77. 77
40 % des internautes
ne vont pas plus loin qu’une première page web
Que faire pour qu’ils restent ?
Analytics SEO, 2010
© Jared Erondu

78. 78
Avoir un but utile
Concevoir tout ça
Facile à utiliser Envie de l’utiliser
(émotion)
Pour tous
Confiance
contenu/service
Aisément
trouvable
© Peter Morville’s User eXperience Honneycomb
usable
useful
findable
desirable
accessible
valuable
credible

79. 79
Règles UX et Accessibilité de base
mais qui marchent

80. 80
Les internautes scrollent !
• 91% des internautes scrollent (scoop 1)
• Parfois jusqu’en bas des pages ! (scoop 2)
Étude ClickTale, 2006

81. 81
-> Définir la zone chaude, le fold :
zone supérieure d’affichage visible selon une résolution donnée
ex. 1024x768 -> barre à 570 pixels
-> Prévoir une hauteur
maximale de page
à raison de 3 scrolls
Les internautes scrollent !

82. 82
Le desktop fold
430
600
850
1030
800x600
1024x768
1200x1024
1600x1200

83. 83
Nous sommes optimistes !
BOUTON
Test du centrage optique
Zone
cliquable

84. 84
Maintenant, choisissez cette option hyper importante :
Choix 1 Choix 2 Choix 3 Choix 4
Associez !
-> Liste à puces linéaires
loi de Gestalt

85. 85
Grossissez !
-> Agrandir les zones de lien ET les zones cliquables
VALIDER VALIDER
loi de Fitts

86. 86
Golden Ratio Typography Calculator
http://www.pearsonified.com/typography/

87. 87
Grossissez le contenu !
Passez vos textes courant à 16px
Interlignage : 21px
CSS en EM et %

88. 88
Action = réaction
• L’interface doit répondre à chaque action de l’utilisateur
– ex. du « panier » en e-commerce

89. 89
Feedback et dialogue
• L’interface doit expliquer clairement ce qui est attendu
de l’utilisateur
– ex. des messages d’alertes
• Donner de l’information ponctuellement
au bon moment

90. 90
L’internaute arrive avec ses acquis (...)
Convention
Lorsque 50 à 79% des sites utilisent le même principe
(après : standard)
– Convention de localisation des éléments
– Convention de vocabulaire
– Convention de présentation
– Convention d’interaction

91. 91
(...) et il peut apprendre
• Capitaliser sur l’apprentissage de l’internaute
• L’accompagner dans sa prise en main

92. 92
Gérez les erreurs
• L’utilisateur se trompe TOUJOURS
– Prévoir qu’il se trompe, annule, retourne en arrière, revient

93. 93
Gérez les attentes
sur mobile, nous passons 1/3 du temps à patienter

94. 94
Gérez les animations
aide à patienter

95. 95
Aux bons mots, le succès
• Le vocabulaire doit être compréhensible
– Les bons libellés
– Orientés utilisateurs
Effectuer une requête
Trier par
Éditer
Rechercher
Afficher par
Modifier

96. 96
Ayez un bon caractère
• Polices sans-serif
de préférence dans le texte courant
Lisibilité
Dyslexie

97. 97
Ayez un bon caractère
Un texte écrit en minuscules, ferré à gauche et bien interligné est plus
lisible qu’en majuscules, mais il est toujours possible d’écrire les libellés de
bouton en majuscules si on les souhaite impactants.
UN TEXTE ECRIT EN MINUSCULES, FERRE A GAUCHE ET BIEN INTERLIGNE EST
PLUS LISIBLE QU’EN MAJUSCULES, MAIS IL EST TOUJOURS POSSIBLE D’ECRIRE
LES LIBELLES DE BOUTON EN MAJUSCULES SI ON LES SOUHAITE
IMPACTANTS.
Lisibilité
Dyslexie

98. 98
Jouez des Contrastes
lisibilité et vitesse de perception

99. 99
Colorable http://jxnblk.com/colorable/demos/

100. 100
Couleurs
Colour Contrast Analyzer (Desktop)

101. 101
Partiellement accessible :
Couleurs

102. 102
Liens
• Les liens doivent être explicites.
• Les libellés sont compréhensibles hors du contexte de la page web.

103. 103
Images et Liens
<a href="" title="Cliquer pour réserver">
Je réserve</a>
<img href="" alt="Logo Air France">

104. 104
Formulaires : utilisez les labels
• Un élément de formulaire doit toujours comporter un label
(étiquette)
<label for="login">Identifiant</label>
<input id="login" name="login" type="text" value="">
L’attribut for du label pointe
vers l’attribut id du champ texte.
Si vous ne pouvez pas mettre de label, les WCAG permettent l’usage de l’attribut
title sur l’élément de formulaire concerné.
Identifiant <input type="text" name="login" title="Votre identifiant">

105. 105
Formulaires HTML5
<input> dispose de nouveaux types qui précisent la donnée
qui sera stockée dans la variable.
• nombre entier (type="number"),
• email (type="email"),
• URL (type="url"),
• date (type="date"),
• mois (type="month"),
• semaine (type="week"),
• date/heure (type="datetime"),
• heure (type="time"),
• plage de valeurs (type="range"),
• téléphone (type="tel"),
• couleur (type="color")

106. 106
Formulaires
• Pensez aux champs requis
<form id="demo">
<label for="user">Identifiant</label>
Username:<input id="user" type="text" name="username" required>
<input type="submit">
</form>

107. 107
Formulaires : améliorez
Nom *
Prénom *
Sujet
Date de réservation *
Commentaire
* Tous les champs sont obligatoires
VALIDERANNULER
À VOUS

108. 108
/ /
Formulaires
Nom *
Prénom *
Sujet
Date de réservation *
Commentaire
NOM
JJ
Tous les champs avec * sont obligatoires
VALIDERX Annuler
MM AAAA
Super !
Sujet
Format JJ/MM/AAAA
Les balises HTML ne
sont pas autorisées.

109. 109
Navigation
Véritables repères d’orientation
• Menu toujours présent, à la même place
• Fil d’ariane
• Code couleur + pictos
• Intitulés uniques
• Accès rapides : ex. par typologie utilisateurs
• Liens d’évitement : ex. http://www.gouvernement.fr/

110. 110
Liens d’évitement

111. 111
a:focus { outline:-webkit-focus-ring-color auto 5px;
outline-offset:-2px; }
Ex : http://www.w3schools.com/cssref/sel_focus.asp

112. 112
Title
Clairement identifié par page

113. 113
Plus c’est grand, plus c’est 16/9e

114. 114
Plus c’est grand, plus c’est 16/9e

115. 115
Faîtes des tests utilisateurs
Focus Group Test utilisateurs
– Méthode collective
– Approche marketing
– Intérêt pour les avis
subjectifs des internautes,
leurs opinions
– Méthode individuelle
– Approche UX/ergo
– Observation des
comportements réels de
navigation pour recueillir
des données objectives
VS.
« Pas besoin de test utilisateurs, nous avons déjà fait plein de réunions ! »
X

116. 116
Écouter la cible, ses envies
+200%
de conversion
7 vs 21 clics
+150%
de compréhension
10 vs 25 perception message

117. 117
UX et accessibilité sont des outils pour
vendre mieux

118. 118
Pratique

119. 119
Améliorons À VOUS

120. 120
Améliorons
* ?
Sélection corbeille ?
Proportions
À VOUS

121. 121
À VOUS

122. 122
espacesespaces
contrastes À VOUS

123. 123

124. 124

125. 125

126. 126

127. 127

128. 128

129. 129

130. 130

131. 131

132. 132

133. 133

134. 134

135. 135
Ergonomie web. Pour des sites web efficaces, Amélie Boucher, Editions Eyrolles,
Collection Accès libre, 356 pages, 2011
The Design of Everyday Things, Donald A. Norman, 257 pages, Basic Books, 2002
Consultable en ligne :
http://www.trilemon.com/wp-content/uploads/2012/04/The-Design-of-Everyday-Things-Revised-and-
Expanded-Edition.pdf
+ 2 conférences :
https://www.youtube.com/watch?v=l9qrlan611I
http://www.ted.com/talks/don_norman_on_design_and_emotion
Design d'expérience utilisateur. Principes et méthodes UX, Sylvie Daumal, Editions Eyrolles,
Collection Design web, 208 pages, 2012
Les blogs et sites à connaître :
http://blocnotes.iergo.fr/
https://uxmag.com/
http://uxmind.eu/
Références et bibliographie UX

136. 136
OPQUAST – Les bonnes pratiques par et pour les pros du Web
http://opquast.com/fr/
Opquast est un écosystème qui regroupe des bonnes pratiques, des outils et des professionnel
pour améliorer la qualité des sites web et l'expérience
RGAA - Référentiel général d'accessibilité pour les administrations http://references.modernisation.gouv.
fr/introduction-au-rgaa-0
Le référentiel général d'accessibilité pour les administrations (RGAA) offre une traduction opérationnelle des
critères d’accessibilité issus des règles internationales ainsi qu'une méthodologie pour vérifier la conformité
ces critères.
Références en accessibilité

137. 137
Merci de votre attention
Des questions ?
@ Linagora
@ AgenceNeoma

138. 138
Témoignage Jean-Philippe Simmonet
28 avril 2016
UX & Accessibilité
Les clés pour réussir

139. 139
Centre-Inffo.fr (2013)

140. 140
Orientation-pour-tous.fr (2012)

141. 141
Orientation-pour-tous.fr (2016)

142. 142
Merci de votre attention
Des questions ?
@ Linagora
@ AgenceNeoma