Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
1
Linagora AgenceNeoma
Tenir compte de tous ses utilisateurs
pour optimiser son business
M
atinée
pour com
prendre
UX & Ac...
2
Experte en solutions
Open Source
Stratégie,
UX et Design
3
?
© Oscar Keys
4
UX et Accessibilité
complémentaires : Usages VS. Accès
communs : Orientés utilisateurs
© Oscar Keys
5
1/ L’UX
2/ L’accessibilité numérique
3/ UX = utilisateurs (comme l’accessibilité)
4/ Règles UX et Accessibilité
Cas prat...
6
Qu’est-ce que l’UX ?
user experience
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Affordance :
Capacité d’un objet
ou d’une caractéristique
à suggérer son utilisation
21
Ergonomie
(grec)
Ergon : travail
Nomos : lois, règles
22
Définition de l’ergonomie :
« étude scientifique
de la relation entre l’homme et
ses moyens,
ses méthodes
et ses milieu...
23
UX :
« User eXperience »
24
Interfaces :
organisation visuelle
cohérence
compréhension
perceptibilité
typographie
mise en page
interactivité
utilis...
25
Objectif :
S’adresser au cerveau fainéant
(car il l’est déjà)
-> l’instinct machinal des internautes
(et leurs attentes...
26
Éviter ça
27
L’accessibilité
numérique
28
Accessibilité
Accès à :
•Un bus
•Un musée
•Un parc
•Un bureau de Poste
29
Perception et lisibilité
Contrastes
30
Accessibilité numérique
Permettre à toute personne,
qu’elle que soit sa déficience,
d’accéder au contenu et au service ...
31
Accessibilité numérique
1999 - Monde
W3C émet les recommandations d’accessibilité web (WCAG)
Loi 11 février 2005 en Fra...
32
Accessibilité numérique
https://www.youtube.com/watch?v=fzgxTGG7hKE
33
Accessibilité numérique -> pour tous
Nous avons tous besoin d’accessibilité :
• en tant que personnes valides : pour tr...
34
Accessibilité numérique
35
Accessibilité numérique
36
Visuel
Auditif
Moteur
Cognitif Processus COGNITIFS
psychologie/capacités dans les domaines :
• perceptifs
• sensori-mot...
37
(vaste) Champs d’actions
38
Maintenabilité Coût Interopérabilité
Plutôt que d’adapter des services
et des interfaces aux handicaps,
on préfère la n...
39
UX, RWD et accessibilité numérique
RGAA 2 et 3 - Zoom 200%
40
UX = Connaître ses utilisateurs
Focus cible
41
Placer l’humain
• Considérer l’homme dans le rapport homme-machine
-> lorsque cela ne fonctionne pas du côté des utilis...
42
Conception
centrée utilisateur
Satisfaire l’internaute
pas les concepteurs
43
UI design
Fonction
« ça marche »
44
Usability design
Action
« ça marche mieux »
45
Émotion
« ça marche mieux
et ça me fait dire Wahou ! »
UX design
46
Utilisabilité
• Un projet interactif réussi est un projet :
– utile
– utilisable
– utilisé
Répondre à un besoin : l’int...
47
Exemple : Leader Vs. Challenger
Comment CapitainTrain triple ses ventes chaque année ?
En misant sur l’expérience clien...
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/mi...
49
Gestalt : loi de proximité
50
Gestalt : loi de proximité
51
Gestalt : loi de proximité
52
Gestalt : loi de proximité
53
Gestalt : loi de proximité
54
Gestalt : loi de proximité
55
Gestalt : loi de similarité (taille)
56
Gestalt : loi de similarité (forme)
57
Gestalt : loi de similarité (couleur)
58
Gestalt : loi de similarité - menu
Chacun des éléments suggère la même fonction d’achat :
- la typographie,
- la couleu...
59
Gestalt : loi de similarité - architecture
60
Gestalt : loi de similarité - produits
61
Gestalt : loi de similarité - gabarit
62
Gestalt : loi de continuité
Principe addictif : la suite d’éléments affichés nous invite à
continuer le déroulement des...
63
Fitts : cible facile
Grossissez vos éléments cliquables.
64
Fitts :
cible facile
Check-box,
Sous-menus :
l’icone & l’intitulé
sont cliquables
65
Fitts : cible facile
Les éléments cliquables doivent être « proches »
66
Miller : 7 (?)
67
Hick :
temps de décision
3 choix exceptionnels !
Sinon, 3 autres à découvrir.
68
Des questions ?
69
Le concept d’affordance
• Capacité d’un objet ou d’une caractéristique à suggérer son
utilisation
• Sur les écrans, l’a...
70
Vous pouvez interagir avec moi
Bouton - affordance
VALIDERVALIDER
71
VALIDERVALIDER
Bouton – affordance - accessibilité
Vous pouvez interagir avec moi
72
RechercherMots-clef
Moteur de recherche
Vous pouvez interagir avec moi
73
Menu déroulant
Windows Seven
Windows Office
Vous pouvez interagir avec moi
74
Nom de la personne
Cette personne est l’auteur d’un ouvrage mondialement
connu que vous devez absolument avoir parmi vo...
75
Vous pouvez interagir avec moi
L’information ne doit jamais être véhiculée par la couleur seule.
76
Vous pouvez interagir avec moi
77
40 % des internautes
ne vont pas plus loin qu’une première page web
Que faire pour qu’ils restent ?
Analytics SEO, 2010...
78
Avoir un but utile
Concevoir tout ça
Facile à utiliser Envie de l’utiliser
(émotion)
Pour tous
Confiance
contenu/servic...
79
Règles UX et Accessibilité de base
mais qui marchent
80
Les internautes scrollent !
• 91% des internautes scrollent (scoop 1)
• Parfois jusqu’en bas des pages ! (scoop 2)
Étud...
81
-> Définir la zone chaude, le fold :
zone supérieure d’affichage visible selon une résolution donnée
ex. 1024x768 -> ba...
82
Le desktop fold
430
600
850
1030
800x600
1024x768
1200x1024
1600x1200
83
Nous sommes optimistes !
BOUTON
Test du centrage optique
Zone
cliquable
84
Maintenant, choisissez cette option hyper importante :
Choix 1 Choix 2 Choix 3 Choix 4
Associez !
-> Liste à puces liné...
85
Grossissez !
-> Agrandir les zones de lien ET les zones cliquables
VALIDER VALIDER
loi de Fitts
86
Golden Ratio Typography Calculator
http://www.pearsonified.com/typography/
87
Grossissez le contenu !
Passez vos textes courant à 16px
Interlignage : 21px
CSS en EM et %
88
Action = réaction
• L’interface doit répondre à chaque action de l’utilisateur
– ex. du « panier » en e-commerce
89
Feedback et dialogue
• L’interface doit expliquer clairement ce qui est attendu
de l’utilisateur
– ex. des messages d’a...
90
L’internaute arrive avec ses acquis (...)
Convention
Lorsque 50 à 79% des sites utilisent le même principe
(après : sta...
91
(...) et il peut apprendre
• Capitaliser sur l’apprentissage de l’internaute
• L’accompagner dans sa prise en main
92
Gérez les erreurs
• L’utilisateur se trompe TOUJOURS
– Prévoir qu’il se trompe, annule, retourne en arrière, revient
93
Gérez les attentes
sur mobile, nous passons 1/3 du temps à patienter
94
Gérez les animations
aide à patienter
95
Aux bons mots, le succès
• Le vocabulaire doit être compréhensible
– Les bons libellés
– Orientés utilisateurs
Effectue...
96
Ayez un bon caractère
• Polices sans-serif
de préférence dans le texte courant
Lisibilité
Dyslexie
97
Ayez un bon caractère
Un texte écrit en minuscules, ferré à gauche et bien interligné est plus
lisible qu’en majuscules...
98
Jouez des Contrastes
lisibilité et vitesse de perception
99
Colorable http://jxnblk.com/colorable/demos/
100
Couleurs
Colour Contrast Analyzer (Desktop)
101
Partiellement accessible :
Couleurs
102
Liens
• Les liens doivent être explicites.
• Les libellés sont compréhensibles hors du contexte de la page web.
103
Images et Liens
<a href="" title="Cliquer pour réserver">
Je réserve</a>
<img href="" alt="Logo Air France">
104
Formulaires : utilisez les labels
• Un élément de formulaire doit toujours comporter un label
(étiquette)
<label for="...
105
Formulaires HTML5
<input> dispose de nouveaux types qui précisent la donnée
qui sera stockée dans la variable.
• nombr...
106
Formulaires
• Pensez aux champs requis
<form id="demo">
<label for="user">Identifiant</label>
Username:<input id="user...
107
Formulaires : améliorez
Nom *
Prénom *
Sujet
Date de réservation *
Commentaire
* Tous les champs sont obligatoires
VAL...
108
/ /
Formulaires
Nom *
Prénom *
Sujet
Date de réservation *
Commentaire
NOM
JJ
Tous les champs avec * sont obligatoires...
109
Navigation
Véritables repères d’orientation
• Menu toujours présent, à la même place
• Fil d’ariane
• Code couleur + p...
110
Liens d’évitement
111
a:focus { outline:-webkit-focus-ring-color auto 5px;
outline-offset:-2px; }
Ex : http://www.w3schools.com/cssref/sel_f...
112
Title
Clairement identifié par page
113
Plus c’est grand, plus c’est 16/9e
114
Plus c’est grand, plus c’est 16/9e
115
Faîtes des tests utilisateurs
Focus Group Test utilisateurs
– Méthode collective
– Approche marketing
– Intérêt pour l...
116
Écouter la cible, ses envies
+200%
de conversion
7 vs 21 clics
+150%
de compréhension
10 vs 25 perception message
117
UX et accessibilité sont des outils pour
vendre mieux
118
Pratique
119
Améliorons À VOUS
120
Améliorons
* ?
Sélection corbeille ?
Proportions
À VOUS
121
À VOUS
122
espacesespaces
contrastes À VOUS
123
124
125
126
127
128
129
130
131
132
133
134
135
Ergonomie web. Pour des sites web efficaces, Amélie Boucher, Editions Eyrolles,
Collection Accès libre, 356 pages, 201...
136
OPQUAST – Les bonnes pratiques par et pour les pros du Web
http://opquast.com/fr/
Opquast est un écosystème qui regrou...
137
Merci de votre attention
Des questions ?
@ Linagora
@ AgenceNeoma
138
Témoignage Jean-Philippe Simmonet
28 avril 2016
UX & Accessibilité
Les clés pour réussir
139
Centre-Inffo.fr (2013)
140
Orientation-pour-tous.fr (2012)
141
Orientation-pour-tous.fr (2016)
142
Merci de votre attention
Des questions ?
@ Linagora
@ AgenceNeoma
Nächste SlideShare
Wird geladen in …5
×

UX & Accessibilité : les clés pour réussir

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.

  • Als Erste(r) kommentieren

UX & Accessibilité : les clés pour réussir

  1. 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. 2 Experte en solutions Open Source Stratégie, UX et Design
  3. 3. 3 ? © Oscar Keys
  4. 4. 4 UX et Accessibilité complémentaires : Usages VS. Accès communs : Orientés utilisateurs © Oscar Keys
  5. 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. 6 Qu’est-ce que l’UX ? user experience
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10. 10
  11. 11. 11
  12. 12. 12
  13. 13. 13
  14. 14. 14
  15. 15. 15
  16. 16. 16
  17. 17. 17
  18. 18. 18
  19. 19. 19
  20. 20. 20 Affordance : Capacité d’un objet ou d’une caractéristique à suggérer son utilisation
  21. 21. 21 Ergonomie (grec) Ergon : travail Nomos : lois, règles
  22. 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. 23 UX : « User eXperience »
  24. 24. 24 Interfaces : organisation visuelle cohérence compréhension perceptibilité typographie mise en page interactivité utilisabilité hiérarchie éditoriale
  25. 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. 26 Éviter ça
  27. 27. 27 L’accessibilité numérique
  28. 28. 28 Accessibilité Accès à : •Un bus •Un musée •Un parc •Un bureau de Poste
  29. 29. 29 Perception et lisibilité Contrastes
  30. 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. 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. 32 Accessibilité numérique https://www.youtube.com/watch?v=fzgxTGG7hKE
  33. 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. 34 Accessibilité numérique
  35. 35. 35 Accessibilité numérique
  36. 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. 37 (vaste) Champs d’actions
  38. 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. 39 UX, RWD et accessibilité numérique RGAA 2 et 3 - Zoom 200%
  40. 40. 40 UX = Connaître ses utilisateurs Focus cible
  41. 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. 42 Conception centrée utilisateur Satisfaire l’internaute pas les concepteurs
  43. 43. 43 UI design Fonction « ça marche »
  44. 44. 44 Usability design Action « ça marche mieux »
  45. 45. 45 Émotion « ça marche mieux et ça me fait dire Wahou ! » UX design
  46. 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. 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. 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. 49 Gestalt : loi de proximité
  50. 50. 50 Gestalt : loi de proximité
  51. 51. 51 Gestalt : loi de proximité
  52. 52. 52 Gestalt : loi de proximité
  53. 53. 53 Gestalt : loi de proximité
  54. 54. 54 Gestalt : loi de proximité
  55. 55. 55 Gestalt : loi de similarité (taille)
  56. 56. 56 Gestalt : loi de similarité (forme)
  57. 57. 57 Gestalt : loi de similarité (couleur)
  58. 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. 59 Gestalt : loi de similarité - architecture
  60. 60. 60 Gestalt : loi de similarité - produits
  61. 61. 61 Gestalt : loi de similarité - gabarit
  62. 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. 63 Fitts : cible facile Grossissez vos éléments cliquables.
  64. 64. 64 Fitts : cible facile Check-box, Sous-menus : l’icone & l’intitulé sont cliquables
  65. 65. 65 Fitts : cible facile Les éléments cliquables doivent être « proches »
  66. 66. 66 Miller : 7 (?)
  67. 67. 67 Hick : temps de décision 3 choix exceptionnels ! Sinon, 3 autres à découvrir.
  68. 68. 68 Des questions ?
  69. 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. 70 Vous pouvez interagir avec moi Bouton - affordance VALIDERVALIDER
  71. 71. 71 VALIDERVALIDER Bouton – affordance - accessibilité Vous pouvez interagir avec moi
  72. 72. 72 RechercherMots-clef Moteur de recherche Vous pouvez interagir avec moi
  73. 73. 73 Menu déroulant Windows Seven Windows Office Vous pouvez interagir avec moi
  74. 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. 75 Vous pouvez interagir avec moi L’information ne doit jamais être véhiculée par la couleur seule.
  76. 76. 76 Vous pouvez interagir avec moi
  77. 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. 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. 79 Règles UX et Accessibilité de base mais qui marchent
  80. 80. 80 Les internautes scrollent ! • 91% des internautes scrollent (scoop 1) • Parfois jusqu’en bas des pages ! (scoop 2) Étude ClickTale, 2006
  81. 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. 82 Le desktop fold 430 600 850 1030 800x600 1024x768 1200x1024 1600x1200
  83. 83. 83 Nous sommes optimistes ! BOUTON Test du centrage optique Zone cliquable
  84. 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. 85 Grossissez ! -> Agrandir les zones de lien ET les zones cliquables VALIDER VALIDER loi de Fitts
  86. 86. 86 Golden Ratio Typography Calculator http://www.pearsonified.com/typography/
  87. 87. 87 Grossissez le contenu ! Passez vos textes courant à 16px Interlignage : 21px CSS en EM et %
  88. 88. 88 Action = réaction • L’interface doit répondre à chaque action de l’utilisateur – ex. du « panier » en e-commerce
  89. 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. 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. 91 (...) et il peut apprendre • Capitaliser sur l’apprentissage de l’internaute • L’accompagner dans sa prise en main
  92. 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. 93 Gérez les attentes sur mobile, nous passons 1/3 du temps à patienter
  94. 94. 94 Gérez les animations aide à patienter
  95. 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. 96 Ayez un bon caractère • Polices sans-serif de préférence dans le texte courant Lisibilité Dyslexie
  97. 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. 98 Jouez des Contrastes lisibilité et vitesse de perception
  99. 99. 99 Colorable http://jxnblk.com/colorable/demos/
  100. 100. 100 Couleurs Colour Contrast Analyzer (Desktop)
  101. 101. 101 Partiellement accessible : Couleurs
  102. 102. 102 Liens • Les liens doivent être explicites. • Les libellés sont compréhensibles hors du contexte de la page web.
  103. 103. 103 Images et Liens <a href="" title="Cliquer pour réserver"> Je réserve</a> <img href="" alt="Logo Air France">
  104. 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. 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. 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. 107 Formulaires : améliorez Nom * Prénom * Sujet Date de réservation * Commentaire * Tous les champs sont obligatoires VALIDERANNULER À VOUS
  108. 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. 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. 110 Liens d’évitement
  111. 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. 112 Title Clairement identifié par page
  113. 113. 113 Plus c’est grand, plus c’est 16/9e
  114. 114. 114 Plus c’est grand, plus c’est 16/9e
  115. 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. 116 Écouter la cible, ses envies +200% de conversion 7 vs 21 clics +150% de compréhension 10 vs 25 perception message
  117. 117. 117 UX et accessibilité sont des outils pour vendre mieux
  118. 118. 118 Pratique
  119. 119. 119 Améliorons À VOUS
  120. 120. 120 Améliorons * ? Sélection corbeille ? Proportions À VOUS
  121. 121. 121 À VOUS
  122. 122. 122 espacesespaces contrastes À VOUS
  123. 123. 123
  124. 124. 124
  125. 125. 125
  126. 126. 126
  127. 127. 127
  128. 128. 128
  129. 129. 129
  130. 130. 130
  131. 131. 131
  132. 132. 132
  133. 133. 133
  134. 134. 134
  135. 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. 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. 137 Merci de votre attention Des questions ? @ Linagora @ AgenceNeoma
  138. 138. 138 Témoignage Jean-Philippe Simmonet 28 avril 2016 UX & Accessibilité Les clés pour réussir
  139. 139. 139 Centre-Inffo.fr (2013)
  140. 140. 140 Orientation-pour-tous.fr (2012)
  141. 141. 141 Orientation-pour-tous.fr (2016)
  142. 142. 142 Merci de votre attention Des questions ? @ Linagora @ AgenceNeoma

×