DANS TOUS SES ÉTATS - Data Marketing Paris 2019 · Utilisabilité Accessibilité ... données...

8
LA USER EXPERIENCE DANS TOUS SES ÉTATS BEST PRACTICES & QUESTIONS-CLÉS

Transcript of DANS TOUS SES ÉTATS - Data Marketing Paris 2019 · Utilisabilité Accessibilité ... données...

Page 1: DANS TOUS SES ÉTATS - Data Marketing Paris 2019 · Utilisabilité Accessibilité ... données enrichies via le SAV ou les réseaux sociaux. Mais ce croisement de données quantitatives

LA USER EXPERIENCE DANS TOUS SES ÉTATSBEST PRACTICES & QUESTIONS-CLÉS

Page 2: DANS TOUS SES ÉTATS - Data Marketing Paris 2019 · Utilisabilité Accessibilité ... données enrichies via le SAV ou les réseaux sociaux. Mais ce croisement de données quantitatives

Sur les conseils de

L’UX en mots

UtilisabilitéAccessibilité

SécuritéPerformance

User InterfaceArchitecture de

l’informationDesign

SensationCompréhension

PerceptionConfiance

Besoin client ErgonomieIHM (interface homme-machine)

Goulven Baron Expert UX Design

Page 3: DANS TOUS SES ÉTATS - Data Marketing Paris 2019 · Utilisabilité Accessibilité ... données enrichies via le SAV ou les réseaux sociaux. Mais ce croisement de données quantitatives

L’UX en 3 prioritésL’UX a la cote depuis dix ans. Mais à quoi sert-elle vraiment ?

CRÉER UNE EXPÉRIENCE INTUITIVE ET FLUIDE POUR LE VISITEUR...éviter les ruptures de compréhension ou de perception

OFFRIR UN SERVICE SUPPLÉMENTAIRE AU VISITEUR...à travers la qualité des outils, des data et des interfaces

SUPPRIMER LES « PAIN POINTS » ...ou défauts inhérents à l’expérience de navigation (ex : lenteurd’affichage, perte de repères, lourdeur du processus d’identification, etc.)

1

2

3

Le point de vue de Goulven Baron

Une des difficultés propres à l’UX tient au fait que la perception et le contexte de l’utilisateur (qui sont par nature mouvants) entrent en ligne de compte pour qualifier la pertinence d’une démarche ou d’une interface UX.

Par exemple, on peut estimer que la vitesse de chargement d’une page est toujours de nature à apaiser le visiteur lorsqu’elle est rapide… Or, ce n’est pas toujours le cas : si vous considérez une situation de création de devis personnalisé pour laquelle le visiteur est en attente de sur-mesure, la génération d’une page en moins de quelques secondes peut avoir l’effet inverse et susciter une certaine angoisse voire une vraie défiance…

Page 4: DANS TOUS SES ÉTATS - Data Marketing Paris 2019 · Utilisabilité Accessibilité ... données enrichies via le SAV ou les réseaux sociaux. Mais ce croisement de données quantitatives

L’UX en 4 étapes-clésPour mettre en place une démarche UX gagnante, l’UX designera tout intérêt à avancer pas à pas…

IMAGINER C’est la phase où l’on prototype plusieurs scénarios de réponses sur le web pour tester le comportement des utilisateurs et mesurer l’évolution de leur expérience. Elle repose donc sur une double compétence designet data.

COMPRENDRE C’est la phase où l’on définit le positionnement d’une réponse UX au besoin client. Elle implique donc une recherche côté utilisateur (quelles sont ses attentes ? pourquoi ?) mais aussi un benchmark des offres existantes pour analyser le panel de réponses possibles à la problématique.

CONSTRUIREC’est la phase où l’on maquette la page web de façon détaillée, en intégrant la nouvelle réponse UX au sein de l’architecture globale du site. Elle implique la collaboration avec les architectes web, les développeurs, les concepteurs d’UI et plus globalement, l’ensemble des contributeurs du projet.

AMÉLIORERC’est la phase où, passée la production et la mise en ligne, l’UX Designer analyse les comportements des visiteurs et affine/rectifie les spécifications UX pour améliorer la réponse à la problématique de départ.

1 2 3 4

Le point de vue de Goulven Baron

L’UX Designer a besoin de la data quasiment à chaque étape : au début pour bien identifier le problème et alimenter son étude avec des besoins utilisateurs précis, puis lors de la phase de prototypage pour recueillir les statistiques de comportements et prendre des décisions, et enfin, après la mise en place de l’offre, pour continuer à améliorer la démarche UX.

Un bon exemple de cette démarche reste Netflix, le parangon autoproclamé de l’UX : leur secret réside probablement dans leur capacité à tester en permanence de nouvelles interfaces. Quand vous regardez Netflix, il est probable que vous ne perceviez pas les mêmes vignettes de films/séries que votre voisin, ou que vous n’ayez pas les mêmes affichages : c’est le fruit d’une démarche d’A/B testing et de personnalisation qui est largement expérimentée en interne.

Page 5: DANS TOUS SES ÉTATS - Data Marketing Paris 2019 · Utilisabilité Accessibilité ... données enrichies via le SAV ou les réseaux sociaux. Mais ce croisement de données quantitatives

L’UX & la Data en 3 questionsConcrètement… Comment marie-t-on data et user experience ? Les conseils de Goulven Baron.

1. COMMENT RÉCUPÉRER LE FEEDBACK UTILISATEUR ?La data joue un rôle très important à ce niveau puisqu’elle va nous indiquer les ruptures facilement identifiables sur un parcours utilisateur (les moments de « décrochage » sur un plan de marquage).

On va également pouvoir recueillir des données enrichies via le SAV ou les réseaux sociaux. Mais ce croisement de données quantitatives ne doit pas occulter le travail plus qualitatif lié à l’interaction avec l’utilisateur (interviews, formulaires) ou aux observations formulées par l’équipe UX. Lier les deux (quanti, quali) est probablement indispensable pour déterminer ce que je nomme « la carte de l’inconnu », soit le profil des besoins de l’utilisateur.

2. COMMENT RÉPONDRE A TOUS LES COMPORTEMENTS ?L’individualisation des parcours est probablement une des problématiques centrales de l’UX : il faut toujours que l’individu pense que le site a été construit pour ses besoins propres - même si, parfois, le parcours qu’il emprunte est en réalité un parcours secondaire dans le mapping UX.

La data est alors d’une grande aide pour identifier et segmenter des populations de visiteurs, et éviter ainsi les biais. Mais bien sûr, on trouvera toujours un cas particulier qui viendra remettre en cause l’approche choisie. Sur ce dernier point, la data nous permet d’être pragmatique : si le comportement identifié est proportionnellement très faible, on peut prendre la décision de recourir à une approche humaine et indiquer par exemple un numéro à contacter pour prendre le relais du site...

3. COMMENT MESURER LA PERFORMANCE D’UNE DÉMARCHE UX ?Je dirais que c’est dans la diversité des metrics que l’on peut trouver un début de réponse : dans le SEO, dans la performance technique du site, dans le nombre de ventes, dans les analytics du site (temps passé, retour sur le site, etc). C’est la combinaison entre ces données qui peut donner un retour utilisateur, mais aussi l’équilibre entre celles-ci car il faut s’assurer qu’aucun paramètre ne prenne l’ascendant.

Cependant, même si la donnée est capitale pour valider une démarche UX, on éprouvera toujours des difficultés à cibler la perception du visiteur, c’est-à-dire la part émotionnelle de son expérience. Seuls les feedback utilisateurs ou l’analyse de leurs comportements via les tests et l’observation in situ (en se basant sur nos connaissances en ergonomie et en psychologie cognitive) peuvent nous venir en aide sur ce point.

Page 6: DANS TOUS SES ÉTATS - Data Marketing Paris 2019 · Utilisabilité Accessibilité ... données enrichies via le SAV ou les réseaux sociaux. Mais ce croisement de données quantitatives

L’UX en pratiqueLes règles d’ergonomie ont vu le jour bien avant Internet. Et depuis, elles sont toujours appliquées… Mais comment y voir clair ?

Nous vous invitons à découvrir quelques principes clés pointés par Goulven Baron et un aperçu de 11 best practices listées par le référentiel de qualité Opquast* (qui en recense près de 300 au total…).

Les 3 grands principes de Goulven Baron

1. LA LISIBILITÉLa hiérarchie des informations et leur accessibilité pour le lecteur (taille, couleur, etc.) restent à la base d’une démarche UX. Même si ce critère peut sembler évident, il implique parfois une réflexion approfondie sur le choix de design (UI) ou l’utilisation de certains frameworks qui ne tiennent pas forcément compte du rendu visuel (tailles de textes, contrastes entre des contenus, etc.).

2. LA COHÉRENCESi vous souhaitez emmener le lecteur sur un parcours de plusieurs pages et vous assurer qu’il n’y ait pas de rupture dans ses repères, il est capital de mettre en place une cohérence visuelle sur les interfaces qui présentent une similitude de fonction et de comportement (les boutons et les liens sont les meilleurs exemples). La logique visuelle amènera intuitivement le lecteur à maîtriser la dimension fonctionnelle de chaque élément et à pouvoir s’en emparer.

3. LE RESPECT DES NORMESQu’on le veuille ou non, dans l’UX, l’originalité n’est pas forcément le sésame pour une expérience réussie ! Il vaut mieux coller à des usages et réutiliser les pratiques des autres sites web que de s’aventurer sur des terrains qui risquent de perdre le visiteur. En User Experience, les dénominateurs communs sont à la fois larges et identifiables : les réutiliser de façon pertinente, c’est garantir une bonne communication avec l’utilisateur.

Page 7: DANS TOUS SES ÉTATS - Data Marketing Paris 2019 · Utilisabilité Accessibilité ... données enrichies via le SAV ou les réseaux sociaux. Mais ce croisement de données quantitatives

1. Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisée.

• Permettre aux utilisateurs qui le souhaitent de visualiser la structure du contenu de la page et d’y naviguer.

• Permettre aux machines et aux outils d’indexation d’extraire le plan de chaque page.

• Améliorer le référencement en facilitant l’interprétation du contenu par les robots d’indexation.

2. Le contenu et le sens de chaque page ne sont pas altérés lorsque les styles sont désactivés.

• Permettre la compréhension des contenus par les utilisateurs dont le navigateur n’appliquera pas les feuilles de styles du site ou dont le mode d’accès n’est pas visuel.

• Séparer rigoureusement les contenus de la présentation pour favoriser leur interopérabilité.

3. Les contenus publicitaires ou sponsorisés sont identifiés comme tels

• Permettre une identification immédiate des contenus publicitaires ou sponsorisés.

• Éviter les confusions entre contenus rédactionnels et publicitaires.

• Prévenir les risques associés aux conflits d’intérêt.

4. L’achat d’un produit ou service est possible sans création de compte.

• Permettre à l’acheteur de commander immédiatement.

• Lever la barrière de la création de compte.• Augmenter le taux de conversion.

5. Chaque champ de formulaire est associé dans le code source à une étiquette qui lui est propre.

• Faciliter la compréhension des données attendues dans les formulaires.

• Permettre aux aides techniques d’accessibilité de restituer les champs de formulaires en les associant systématiquement à une étiquette indiquant leur rôle et la nature de la saisie attendue.

• Faciliter la saisie en permettant de sélectionner le champ via un clic sur son étiquette aussi bien que sur le champ lui-même (particulièrement en cas de case à cocher ou de case radio).

6. Les processus complexes sont accompagnés de la liste de leurs étapes.

• Donner de la visibilité à l’utilisateur sur les actions qu’il va réaliser (temps, ordre des étapes, informations nécessaires pour les accomplir, etc.).

• Éviter que l’utilisateur ne se sente piégé dans un processus dont il n’avait pas prévu la durée.

Quelques Best Practices d’UX (selon Opquast*)

Page 8: DANS TOUS SES ÉTATS - Data Marketing Paris 2019 · Utilisabilité Accessibilité ... données enrichies via le SAV ou les réseaux sociaux. Mais ce croisement de données quantitatives

7. Les blocs de navigation de même nature sont affichés aux mêmes emplacements sur toutes les pages.

• Faciliter l’apprentissage de la navigation sur l’interface.

• Faciliter le repérage de l’information.

8. Un contenu n’est pas désigné uniquement par sa forme ou par sa position à l’écran.

• Permettre la compréhension de l’information sans l’accès au support visuel ou lorsque le rendu de celui-ci est altéré.

9. Les échanges de données sensibles sont sécurisés et signalés comme tels.

• Conforter la confiance de l’utilisateur.• Permettre à l’utilisateur de saisir des données

sensibles en sachant qu’elles seront protégées.• Minimiser les risques d’utilisation frauduleuse

des données des utilisateurs.

10. L’objectif des cookies et les limitations inhérentes à leur refus sont expliqués.

• Informer l’utilisateur sur les cookies.• Expliquer leur rôle et leur utilité.

11. Le menu principal de navigation figure sur les pages d’erreur personnalisées.

• Éviter aux utilisateurs les ruptures de navigation, l’arrivée sur des pages cul-de-sac ou l’obligation d’utiliser le bouton Précédent du navigateur.

Quelques Best Practices d’UX (selon Opquast*)

*Opquast signifie Open Quality Standards et propose des checklists élaborées par des professionnels dans des ateliers collaboratifs en ligne. Les critères sont sous licence licence creative commons CC-BY-SA. Le reste des contenus sont la propriété de la société Opquast.L’idée des bonnes pratiques en une page a été proposée et mise en œuvre par @eQroeil ainsi que par la DILA pour sa check-list Pidila. Plus d’informations sur http://www.opquast.com/

Rendez-vous l’année prochaine pour une nouvelle édition de DATAMARKETING Paris.

RESTEZ CONNECTÉS www.datamarketingparis.com/2018/