1 Linagora AgenceNeoma Tenir compte de tous ses utilisateurs pour optimiser son business Matinée pour comprendre UX & Accessibilité Les clés pour réussir 28 avril 2016
1
Linagora AgenceNeoma
Tenir compte de tous ses utilisateurspour optimiser son business
Matinée
pour comprendre
UX & Accessibilité
Les clés pour réussir
28 avril 2016
2
Experte en solutionsOpen 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 pratiques
TEST
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 objetou d’une caractéristiqueà suggérer son utilisation
21
Ergonomie(grec)
Ergon : travailNomos : lois, règles
22
Définition de l’ergonomie :
« étude scientifiquede la relation entre l’homme et
ses moyens,ses méthodes
et ses milieux de travail. »
23
UX :
« User eXperience »
24
Interfaces :
organisation visuellecohérence
compréhensionperceptibilitétypographiemise en pageinteractivitéutilisabilité
hiérarchie éditoriale
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
É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 proposé.
Cible : 15% des internautes dans le monde
31
Accessibilité numérique
1999 - MondeW3C émet les recommandations d’accessibilité web (WCAG)
Loi 11 février 2005 en France« Pour l'égalité des droits et des chances, la participation etla 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
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 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
Accessibilité numérique
35
Accessibilité numérique
36
Visuel
Auditif
Moteur
Cognitif Processus COGNITIFSpsychologie/capacités dans les domaines : • perceptifs • sensori-moteur • du raisonnement • de la mémoire • du langage • de l’espace
Accessibilité numérique
37
(vaste) Champs d’actions
38
Maintenabilité Coût Interopérabilité
Plutôt que d’adapter des serviceset des interfaces aux handicaps,on préfère la notion de conception universelle.
Accessibilité numérique
39
UX, RWD et accessibilité numérique
RGAA 2 et 3 - Zoom 200%
40
UX = Connaître ses utilisateursFocus cible
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 entrela vision du concepteur et celle de l’utilisateur final
• Conception centrée utilisateurUX-design, UX-conception, UX-ergonomie
-> se mettre constamment dans la peau de votre internaute
42
Conceptioncentrée utilisateur
Satisfaire l’internautepas les concepteurs
43
UI design
Fonction
« ça marche »
44
Usability design
Action
« ça marche mieux »
45
Émotion
« ça marche mieuxet ç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’internaute vient pour une raisonou pour quelque chose
Faciliter la satisfaction du besoin : l’internaute reste et trouvece qu’il veut le plus aisément que possible
Prolonger la satisfaction du besoin : l’internaute revientcar il trouve son bonheur
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
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 facileet rapide à atteindrequ’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
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 couleur,- le design de même nature
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 prochaines images.
BONUS
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’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
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 personneCette 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
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
© Jared Erondu
78
Avoir un but utile
Concevoir tout ça
Facile à utiliser Envie de l’utiliser(émotion)
Pour tous
Confiance contenu/service
Aisémenttrouvable
© Peter Morville’s User eXperience Honneycomb
usable
useful
findable
desirable
accessible
valuable
credible
79
Règles UX et Accessibilité de basemais qui marchent
80
Les internautes scrollent !
• 91% des internautes scrollent (scoop 1)
• Parfois jusqu’en bas des pages ! (scoop 2)
Étude ClickTale, 2006
81
-> Définir la zone chaude, le fold :zone supérieure d’affichage visible selon une résolution donnéeex. 1024x768 -> barre à 570 pixels
-> Prévoir une hauteurmaximale de pageà raison de 3 scrolls
Les internautes scrollent !
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éaires
loi de Gestalt
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 : 21pxCSS 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 attendude l’utilisateur
– ex. des messages d’alertes
• Donner de l’information ponctuellementau bon moment
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
(...) 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 attentessur mobile, nous passons 1/3 du temps à patienter
94
Gérez les animationsaide à patienter
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
Ayez un bon caractère
• Polices sans-serifde 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, 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
Jouez des Contrasteslisibilité 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="login">Identifiant</label>
<input id="login" name="login" type="text" value="">
L’attribut for du label pointevers 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
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
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
Formulaires : améliorez
Nom *
Prénom *
Sujet
Date de réservation *
Commentaire
* Tous les champs sont obligatoires
VALIDERANNULER
À VOUS
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
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
Liens d’évitement
111
a:focus { outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px; }
Ex : http://www.w3schools.com/cssref/sel_focus.asp
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 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
É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, 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
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 professionnels
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
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