Améliorez l'expérience utilisateur de vos formulaires web

Améliorer l’expérience utilisateur

des formulaires web
Une histoire que vous connaissez déjà…
by Kelly Sikkema
Image

View Slide

“L’expérience de vos formulaires web” — @geoffreycrofte DevFest Nantes 2022
Geoffrey Crofte
@geoffreycrofte
linkedin.com/in/geoffreycrofte
creativejuiz.fr/blog/
Lead (System) Designer / UX Designer

View Slide

Comment ça va se passer ?
Autour du formulaire
 
Les bases ergonomiques d’un formulaire
 
Aide à la complétion et rétention
 
Traitement du formulaire et gestion des données
 
À emporter : une checklist

View Slide

J’ai une histoire à vous raconter…

View Slide

C’est l’histoire d’une personne qui veut
partir en congés à l’étranger…

— Tiré d’une histoire vraie

View Slide

Un prénom n’est jamais invalide, il faut
arrêter avec ce message.
 
L’erreur n’était pas claire.
 
Les fautes du système sont rejetées sur
l’utilisateur final.
 
Le commandant de bord était un $%¶§
Plusieurs problèmes ici

View Slide

Des histoires de ce type, il y en a plein les internets
et sont des effets extrêmes de problèmes
d’ergonomie ou de « mauvais » design.
Et ce n’est pas
 
le seul cas

View Slide

Le formulaire est le début d’une
conversation (asynchrone) entre un
visiteur et le propriétaire d’un site web.

View Slide

Autour du formulaire

View Slide

Vous ne pourrez que difficilement
proposer une expérience acceptable à vos
utilisatrices si le système traitant ou
fournissant la donnée ne vous le permet
pas.
Le système en place…

View Slide

Pour l’avoir vécu, vous risquez :
Mauvais back, mauvaise
expérience
de perdre du temps en analyse,
 
de faire, défaire et refaire vos parcours,
 
de devoir faire des compromis sur
l’expérience utilisateur

View Slide

Avant de commencer un nouveau formulaire ou
processus en ligne, quelques questions s’imposent :
Les questions à (me) poser
Est-ce que la logique métier me permet de faire cela ?

Est-ce que les données existent et peuvent être stockées ?

Est-il nécessaire de créer une nouvelle base de données ?

Qu’en est-il des performances ? Y a t’il une API pour me
retourner les données ? En combien de temps répond-elle ?

etc.

View Slide

Avant de tout chambouler, assurez-vous de
l’attachement de vos utilisateurs et utilisatrices à
votre l’existant.
Partir d’un existant
Allez-vous changer profondément des habitudes ?

Pouvez-vous éviter de les changer ?

Comment accompagner ce changement ?

View Slide

La formation de l’ensemble des équipes
est primordiale pour une numérisation
des processus en place.

Votre formation et vos connaissances en
tant que designer ou développeur
également.
La formation des équipes

View Slide

Posez-vous les bonnes questions :
La formation des devs
Suis-je capable de faire cela tout de suite ?

Si non, ai-je du temps alloué à me former ?

Ai-je la capacité d’absorber la formation
avant la deadline ?

Est-ce que cette deadline vaut le coup de
dégrader l’expérience utilisateur ?

View Slide

Posez-vous les bonnes questions :
La formation des designers
Ai-je suffisamment de connaissance métier ?

Ai-je les bons contacts internes ?

Ai-je les bons arguments pour m’adresser à la
direction/manager et aux équipes de
développement ?

Ai-je le temps de faire tout cela, me former ?

View Slide

Est-ce que je dois vraiment rester dans
une boîte qui ne me laisse pas le temps
d’apprendre et de faire correctement
mon travail ?

View Slide

Le service, c’est ce qui suit le remplissage
du formulaire : une fois que je l’ai rempli
et envoyé, il se passe quelque chose
comme un traitement informatique, un
traitement manuel par un humain, ou un
ensemble de services client.
Le service

View Slide

Une expérience en ligne fabuleuse
et fluide, mais un service client tout
simplement absent.

— Témoignage

View Slide

Lorsque vous introduisez un nouveau
parcours ou formulaire en ligne,
considérez vos collègues.
 
 
Ces collègues vont devoir offrir un service
en traitant les données de ce formulaire.
 
 
Ont-ils la capacité de le faire ?
La charge de vos collègues

View Slide

Plusieurs choses à vérifier ici :
La charge de vos collègues
que la numérisation du processus soit
faisable dans son ensemble.

que les données demandées soient
suffisantes pour un processus de bout en
bout.

que la charge des humains qui vont traiter
cette donnée soit supportable à terme.

View Slide

View Slide

un label

un champ de formulaire

et c’est tout !
Tout le monde sait ce qu’est un champ de
formulaire, n’est-ce pas ?
L’anatomie d’un champ

View Slide

le type de champ (d’un point de vue technique)

l’autocomplete

la notion de widget et d’aide à la complétion
On oublie trop souvent
la gestion des erreurs et correction,

les descriptions riches et aides visuelles

la rétention des informations disponibles

View Slide

Contrôle du type ou de la forme du contenu

On ne valide pas au bon moment.

On utilise du placeholder à la place des labels
Et parfois on applique trop de…
On se permet des styles exotiques🍍 de champ,

etc.

View Slide


Le contexte

View Slide

Votre formulaire s’inscrit forcément dans un
contexte de collecte de données, précisez à
votre utilisatrice :
Le contexte
Le contexte de la collecte

L’objectif de la collecte de ces données

Éventuellement le résultat/bénéfice
 
(La manière dont elle pourra accéder ou corriger ces
données)

View Slide


Le label

View Slide

Le label, c’est la question que vous
posez à votre visiteur pour obtenir un
réponse, une donnée.

View Slide

Pour quelque chose d’aussi simple qu’un
formulaire de connexion, le champ identifiant
peut facilement devenir plusieurs choses dans
l’esprit des utilisateurs.
Définir un libellé
Une adresse e-mail

Un numéro de client

Un numéro de contrat

Un numéro de téléphone

Un pseudonyme choisi par la personne

View Slide

Dans notre cas, nous avons explicité le type
d’information attendu.

Souvent une friction peut assez simplement
être corrigée.
Définir un libellé

View Slide

Pro Tips
Le numéro de téléphone

n’est pas

un identifiant valide*
* sauf rares exceptions définies par une règle métier stricte

View Slide

Placez votre label avant le champ, pas après,
pas à côté, pas un mélange des 3 non plus.
Placer un libellé
Les gens en ont l’habitude

Offre un parcours homogène

Plus facile à implémenter (responsive)

Plus accessible par défaut
👎

View Slide


La description d’un champ

View Slide

La description a bien souvent sa place
directement dans le label.

C’est plus facile de l’associer au champ d’un
point de vue technique.

Cela apporte une meilleure structure d’un
point de vue ergonomique.
Ajouter une description

View Slide

Identif
i
ant
 
Commence par…
< /
span>
 
< /
label>
 
 

 
Identif
i
ant
 
Commence par…
< /
span>
 

 
< /
label>

View Slide

Cela complexifie un peu le code, mais
également la lisibilité, notamment dans un
formulaire riche.
Description après ?
Identif
i
ant
< /
label>
 
-
describedby="desc1" … >
 
Commence par…
< /
span>

View Slide


Les champs et leurs types

View Slide

Pour qu’un champ soit un champ, il faut
pouvoir en distinguer ses contours, autrement
ce n’est pas un champ :
Le champs de formulaire
Utilisez une bordure assez contrastée

OU un fond assez fortement contrasté

View Slide

Votre bordure doit être pleine et proposer un
contraste suffisant avec le fond de votre page
ou bloc.
La bordure
WCAG parle d’un contrast de 3 : 1

Vous pouvez avoir une bordure > 1px

View Slide

Lorsqu’une personne utilise le champ pour le
remplir, l’état :focus est stylable en CSS.
Idem pour l’état focus à la navigation clavier,
stylable via :focus
-
visible.
N’oubliez pas l’état :focus
Proposez un état évidemment différent au
moins pour l’état :focus.

Vous êtes joueurs ? Testez :focus
-
within.

View Slide

Les types de champ ont été complétés par
HTML 5 il y a quelques années maintenant.

Ces types ont aujourd’hui plus de 10 ans mais
sont encore bien sous-utilisés.

Pour plus de HTML 5 de bonne qualité, voir le
sujet de Gaël Poupard dans l’après-midi.
Les types de champ

View Slide

Un des premiers avantages visibles en terme
d’expérience utilisateur, est l’affichage d’un
clavier adapté pour les utilisateurs mobiles.
Les autres avantages :
Leurs avantages
peut être annoncé par un lecteur d’écran,

affiche des indices visuels,

propose un pattern de validation par défaut,

est future-proof
bit.ly/inputtype

View Slide

Malgré tout, ces avantages peuvent aussi être
des défauts.
Leurs défauts
le type number embarque un spinner control

le type date affiche une icône calendrier

la validation à la volée ne vous convient peut-
être pas.

l’expérience apportée n’est peut-être pas
celle que vous recherchez.

View Slide

inputmode à la rescousse
inputmodes.com

View Slide

VS

inputmodes.com

View Slide

 
inputmode="numeric" … >
VS

inputmodes.com

View Slide

View Slide

Ce mode de remplissage est privilégié pour les
textes longs en général, et par tout type de
personne.
Par défaut, de type et d’inputmode text
permet le remplissage du champ grâce à la
voix.
Speech input
Keyword: SpeechRecognition API

View Slide


Respectez les règles en place

View Slide

Un des premiers formulaire que j’ai trouvé
remonte à 1990, autant vous dire que
quelques habitudes se sont installées en 32
ans. Bien sûr ils ne ressemblaient pas
forcément à ce qu’on connaît aujourd’hui.

Je parle ici de règle d’affichage, d’aspect visuel
et d’ergonomie.

Un peu d’histoire
Archie, le premier moteur de recherche d’un réseau FTP local.

View Slide

WooCommerce propose un écran de choix de
fonctionnalités lors de son onboarding sur
l’écran dédié à l’installation du plugin.

Le choix proposé semble être un choix unique
avec des boutons radios, hélas très peu
contrastés.
Exemple des radio buttons

View Slide

View Slide

Le designer de ces checkboxes a aussi voulu
jouer au malin.

Ces checkboxes ressemblent fortement à des
cases pré-cochées en lecture seule, non ?
Exemple de checkboxes

View Slide

Vous vous rappelez certainement de la mode
horrible des champs représentés avec une
seule ligne ?
Exemple de champs classiques
confondus avec des séparateurs

utilisateur ne sait pas où taper

illisibles combinés à du placeholder
bit.ly/material-fields

View Slide

Si l’originalité de votre proposition
graphique vient en perturber sa
compréhension, alors changez-la,
c’est qu’elle n’est pas bonne.
 
— Moi

View Slide


Agencement d’un formulaire

View Slide

Peu importe la solution choisie, une des règles
les plus élémentaire et l’utilisation d’un blanc-
tournant, ou encore espace blanc.
L’espace blanc
Il est important de proposer un alignement
uniforme et des espacements réguliers pour
créer un rythme visuel.

View Slide

Notre perception regroupe d’abord les points
proches les uns des autres.

Dans une interface les groupes créés peuvent
avoir une fonctionnalité ou un objectif
commun.
La loi de proximité

View Slide

Loi de proximité

View Slide

View Slide

Découper un long processus en plusieurs
étapes est une bonne manière de décharger
cognitivement vos utilisateurs et utilisatrices.

Cependant, cela implique une bonne découpe
logique, et la prise en compte de certaines
contraintes.
Multi-étapes

View Slide

Dans les nombreux avantages du multi-étape :
Multi-étapes : avantages
expose en un clin d’oeil les différentes étapes

soulage cognitivement et permet de focus

rassure sur le niveau de complétion (donne
de la visibilité à l’ensemble)

View Slide

Malgré tout, voici quelques désavantages :
Multi-étapes : inconvénients
peut faire peur de prime-abord,

demande un plus grand travail de design

demande une attention en terme de dév.

ils sont souvent le synonyme de règles métier
trop complexes.

View Slide

Pour ce type de solution, n’oubliez pas :
Multi-étapes : ne pas oublier
de créer des étapes cohérentes, thématiques,

permettre de revenir en arrière,

pouvoir sauvegarder et revenir plus tard,

proposer un récapitulatif final

View Slide

Proposer un formulaire « ultra focus »
affichant 1 champ après l’autre peut-être une
bonne manière de ne pas perdre l’attention de
l’utilisatrice.

Cependant, cela implique d’avoir des indices
visuels clairs et un formulaire court.
Champ par champ

View Slide

View Slide

Aide à la complétion & rétention

View Slide

Utilisez un langage simple et non-jargonné,

Testez votre formulaire avec votre cible,

Décrivez plus longuement si nécessaire.
Encore une fois, le label est l’élément
primordial qui permet de démarrer une
conversation.
Le label

View Slide

Utilisez le champ le plus adapté.

Vérifiez que cela expose bien toutes les
options sans surcharger le formulaire.
Nous l’avons déjà vu, le type de champ peut
influencer le comportement de nos visiteurs.
Le type de champ

View Slide

C’est un indice que la taille de la donnée
attendue.

C’est subtile mais peut jouer dans
l’anticipation visuelle sur ce type de
formulaire à plusieurs champs.
La taille du champ

View Slide

C’est un autre indice visuel au même titre que
la taille du champ.

Il aide à mieux comprendre le format attendu
sur ce champ, voire accompagne la saisie en
évitant de taper des caractères de séparation.
(espace ou « / » par exemple), et facilite la
relecture de la donnée.
Les masques de champ
Votre IBAN

Exemple de format : LU16 1234 1234 1234 0000

View Slide

Le mieux pour une formulaire, c’est de ne pas
avoir à le remplir.

Ici par exemple, il existe des règles locale me
permettant de pré-compléter plein de champs.

Si vous avez déjà des informations en mémoire,
ou via un autre système, pré-complétez !
La pré-complétion

View Slide

D’ailleurs pour vous y aider, vous pouvez
utiliser l’autocomplete.

Un attribut pratique qui permet au navigateur
de compléter des champs en 1 action de
l’utilisateur, si ces données sont en mémoire.
L’autocomplete
 
autocomplete="name">
Doc du MDN
 

View Slide

D’ailleurs pour vous y aider, vous pouvez
utiliser l’autocomplete.

Un attribut pratique qui permet au navigateur
de compléter des champs en 1 action de
l’utilisateur, si ces données sont en mémoire.
L’autocomplete
 
autocomplete="one
-
time
-
code"
 
inputmode="numeric">
bit.ly/otc-demo

View Slide

Si je renseigne une adresse en France, il y a de
fortes chances que je possède également un
numéro de téléphone Français.

Aidez-moi en pré-complétant le préfixe de
téléphone à +33. Mais permettez-moi de
changer cette valeur.
Inter-connexion

View Slide

Une fois que vous avez récupéré ces
informations, assurez-vous de les retenir.
Rétention de l’info
Ne les perdez pas en cas d’erreur,

Ne les perdez pas en cas de crash,

N’utilisez pas de button type reset 🤬

Ne donnez pas un temps limite de session.
bit.ly/form-saver

View Slide

Validation et gestion des erreurs

View Slide

Le meilleur moyen de limiter les erreurs,
c’est de limiter les données demandées,
et les vérifications sur ces données.

View Slide

Il arrive soit trop tôt (onchange)

Soit trop tard, quand l’utilisateur quitte le
champ (onblur) ou quand l’utilisatrice
souhaite soumettre le formulaire.
D’après plusieurs études et constats, le
message d’erreur n’arrive jamais au bon
moment.
Jamais au bon moment

View Slide

Supprimer l’erreur quand l’utilisateur a
corrigé le champ,

Valider le contenu le plus rapidement
possible, mais pas pendant le remplissage de
la donnée.
…c’est que plusieurs règles permettent de
limiter la frustration des utilisatrices.
Mais ce qui est sûr…

View Slide

Take aways

S’il fallait résumer

View Slide

Soyez light
demandez uniquement l’utile.
Take aways


View Slide

Soyez light
Take aways

Pensez aux types de champs
pour accompagner la complétion

View Slide

Soyez light
Take aways

Pensez au contexte
et fournissez l’objectif du formulaire

View Slide

Soyez light
Take aways

Pensez au contexte
Utilisez un langage simple
pour que toutes et tous comprennent

View Slide

Soyez light
Take aways

Pensez au contexte
Validez au bon moment
et validez uniquement le nécessaire

View Slide

Soyez light
Take aways

Pensez au contexte
Validez au bon moment
et validez uniquement le nécessaire
Testez testez testez
car chaque cible est unique.

View Slide

DevFest Nantes 2022
“L’expérience de vos formulaires web” — @geoffreycrofte
Geri Reid, « Forms best practices »

Adrian Roselli, « Avoid messages under fields »

Stéphanie Walter, « Hello My Name is Stéphanie »

Twilio, « Why username and password on 2 different pages »

Jessica Kerr, profil de l’autrice de nombreux contenus sur les formulaires

Venture Harbour, « The evolution of webforms »

MDN, Accessible Basic Form Hints

Geoffrey Crofte, Customize Radio Button and Checkboxes with CSS

WhatWG, Form control infrastructure, Autofill
Ressources complémentaires Évitez

UX Movement

View Slide

Elle arrive, il faudra attendre 1 semaine encore.
Et la checklist ?

View Slide

https://forms.gle/pjxDXiekmakTjxgY6
Feedback sur la conf.
https://forms.gle/ME1WQRu3KSmeE4TJ7
Checklist & Ebook
En général je ne mords pas.
Des questions ?
geoffreycrofte.com/book

View Slide

https://forms.gle/pjxDXiekmakTjxgY6
Feedback sur la conf.
https://forms.gle/ME1WQRu3KSmeE4TJ7
Checklist & Ebook

View Slide

“L’expérience de vos formulaires web” — @geoffreycrofte DevFest Nantes 2022
Geoffrey Crofte
@geoffreycrofte
linkedin.com/in/geoffreycrofte
creativejuiz.fr/blog/
Lead (System) Designer / UX Designer @

View Slide

Améliorez l'expérience utilisateur de vos formulaires web

Améliorez l'expérience utilisateur de vos formulaires web

Geoffrey Crofte

More Decks by Geoffrey Crofte

Other Decks in Design

Featured

Transcript