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

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