Slide 1
Slide 1 text
Aidez-moi à remplir vos
formulaires mobile !
Stéphanie Walter — @WalterStephanie
Slide 2
Slide 2 text
Web & UX designer.
Accro au Mobile. HTML et CSS Lover.
www.stephaniewalter.fr @WalterStephanie
Illustration par Laurence V.
Slide 3
Slide 3 text
Simplification des formulaires
Ou pourquoi ça ne fonctionne pas toujours
Slide 4
Slide 4 text
L’étude 11-4 et le taux de conversion de 120% que
tout le monde cite
Version réduite
Version de base
Slide 5
Slide 5 text
Pourquoi ça peut marcher ?
La technique du « pied dans la porte »
Slide 6
Slide 6 text
Demander les informations en contexte
augmente les chances que l’utilisateur.rice les
fournisse
Slide 7
Slide 7 text
Parfois supprimer des champs est
contreproductif
Version de base Version réduite
- 14.23%
Slide 8
Slide 8 text
Parfois supprimer des champs est
contreproductif
+ 19.21%
Version retravaillée
Version de base
Slide 9
Slide 9 text
Tester
• Le temps de complétion
• Le taux d’abandon
• Les points d’accrochage
• La frustration
utilisateur.rice
Slide 10
Slide 10 text
Prioriser la lisibilité et la compréhension
Optimisation des labels, inputs, descriptions et
placeholders
Slide 11
Slide 11 text
Le formulaire devrait se baser sur le modèle
mental de l’utilisateur.rice, pas votre base de
donnée !
Slide 12
Slide 12 text
Optimisation des labels
Slide 13
Slide 13 text
En portrait : placer le label au dessus du
champ
Slide 14
Slide 14 text
En paysage : placer le label à gauche du
champ
Slide 15
Slide 15 text
Le clavier peut prendre ½ de l’espace : rendre
les champs compréhensibles sans contexte
Slide 16
Slide 16 text
Éviter le tout
majuscule
Prévoir des labels
clairs et concis
Slide 17
Slide 17 text
Optimisation des descriptions de
champs
Slide 18
Slide 18 text
Comprendre ce
qu’on me
demande
Slide 19
Slide 19 text
Comprendre pourquoi le site a besoin de
l’information
Slide 20
Slide 20 text
Comprendre où trouver l’information
Slide 21
Slide 21 text
Comprendre comment je vais devoir la
formater
Slide 22
Slide 22 text
Les placeholders, cette fausse
bonne idée
Slide 23
Slide 23 text
Un champ avec du
contenu attire
moins l’attention
qu’un champ vide
qui peut sembler
déjà pré-rempli
Slide 24
Slide 24 text
Bannir le « tout placeholder »
Slide 25
Slide 25 text
Sauf pour les
formulaires
courts
(recherche, login)
Slide 26
Slide 26 text
Le « floating label », une solution hybride
Slide 27
Slide 27 text
Disposition et mise en page
Slide 28
Slide 28 text
Marquer les
champs
optionnels et
obligatoires
(surtout pour les longs
formulaires)
Slide 29
Slide 29 text
Prévoir la localisation le plus tôt possible
Slide 30
Slide 30 text
Les contraintes de l’écran mobile
S’adapter au touch et à la taille de l’appareil
Slide 31
Slide 31 text
Lier les labels aux
champs
Votre nom
Slide 32
Slide 32 text
Paddings et margins CSS pour faciliter les
interactions au touch
Slide 33
Slide 33 text
Indiquer le champ
dans lequel se trouve
l’utilisateur.rice avec
:focus
input:not([type="submit"]):focus {
border: 1px solid gray;
background: rgba(0, 0, 0, 0.1);
}
Slide 34
Slide 34 text
Proposer un retour
au touch
avec :active
.checkbox input[type=checkbox]:active +
label {
background: rgba(0, 0, 0, 0.1);
}
input[type="submit"]:hover,
input[type="submit"]:active {
cursor: pointer;
background: #3d1523;
color: #fff;
}
Slide 35
Slide 35 text
Attention à respecter
l’ordre des champs
avec les aides du
clavier iOS
(attention au tab-index)
Slide 36
Slide 36 text
Faciliter le remplissage des
champs
Inputs HTML5, claviers dédiés et masques de champs
Slide 37
Slide 37 text
De manière
générale, faire en
sorte que le champ
ait la taille du
contenu souhaité
Slide 38
Slide 38 text
Adresse email
Slide 39
Slide 39 text
URL de site
Slide 40
Slide 40 text
Date
Slide 41
Slide 41 text
Quantité et format numérique
Slide 42
Slide 42 text
Pattern et inputmode
Slide 43
Slide 43 text
Numéro de téléphone
Slide 44
Slide 44 text
Champ de recherche
Slide 45
Slide 45 text
Couleur et range
Slide 46
Slide 46 text
Autocapitalize, autocorrect et autocomplete
Slide 47
Slide 47 text
Éviter de découper
les champs
Slide 48
Slide 48 text
Préférer les
masques de champ
à la place
Slide 49
Slide 49 text
Réduire les interactions
Concevoir des éléments de formulaire plus efficaces sur mobile
Slide 50
Slide 50 text
N’utiliser les menus déroulants
qu’en dernier recours
Slide 51
Slide 51 text
Remplacer les menu déroulants par de
l’auto-complétion
Slide 52
Slide 52 text
Pour une date, référer un date-picker à
plusieurs menus déroulants
Slide 53
Slide 53 text
Proposer des systèmes d’incrémenteurs pour
les petites quantités
Image via Luke W.
Slide 54
Slide 54 text
Segments et
boutons radio
sont utilisables
s’il y a peu
d’options
Image via Luke W.
Slide 55
Slide 55 text
Découper l’interface en plusieurs étapes
(list view)
Slide 56
Slide 56 text
Faciliter le remplissage
Slide 57
Slide 57 text
Faciliter
l’inscription :
réseaux sociaux,
compte invité,
etc.
Slide 58
Slide 58 text
Eviter de demander
plusieurs fois la
même information
Slide 59
Slide 59 text
Le focus directement dans le champ
Slide 60
Slide 60 text
Auto-compléter
les champs quand
c’est possible
(par exemple ici une
adresse)
Slide 61
Slide 61 text
Auto-détecter le
type de carte de
crédit
Slide 62
Slide 62 text
Utiliser les capteurs de l’appareil
Géolocalisation, appareil photo, microphone comme nouveaux modes d’input
Slide 63
Slide 63 text
Géolocalisation
HTML5 pour gagner
du temps
Demande d’accès au GPS via
le navigateur
Slide 64
Slide 64 text
Utilisation des medias
Slide 65
Slide 65 text
Ouvrir directement l’appareil photo/ enregistreur audio
Slide 66
Slide 66 text
Scanner le numéro de
série au lieu de
l’entrer à la main
Slide 67
Slide 67 text
iOS et scanner de
carte de crédit
Slide 68
Slide 68 text
Attention aux demandes de permission dans
le navigateur mobile
Slide 69
Slide 69 text
Bluetooth, beacons et plus si affinité ?
Slide 70
Slide 70 text
La gestion des erreurs
De la prévention à la correction des erreurs
Slide 71
Slide 71 text
Mieux vaut prévenir que guérir
Slide 72
Slide 72 text
Attention à vos options par défaut
Slide 73
Slide 73 text
Restreindre les choix pour guider
intelligemment
Slide 74
Slide 74 text
Informer l’utilisateur.rice des contraintes
Slide 75
Slide 75 text
Afficher / masquer
le mot de passe
pour éviter les
erreurs
Slide 76
Slide 76 text
Aider l’utilisateur.rice à réparer ses
erreurs
Slide 77
Slide 77 text
Préférer la
validation des
champs en ligne
Slide 78
Slide 78 text
Préférer le jaune et orange au rouge trop
anxiogène
(attention à l’accessibilité)
Slide 79
Slide 79 text
Ne pas utiliser la couleur comme unique
indication d’erreur
Slide 80
Slide 80 text
Validation HTML5 proposée par le navigateur
Slide 81
Slide 81 text
Validation en temps réel au fur et à mesure de
la saisie
Slide 82
Slide 82 text
Champ valide / non
rempli : lancer la
validation une fois le
champ rempli
Inline validation in forms
Slide 83
Slide 83 text
Champ qui a été
marqué comme
invalide : lancer la
validation durant la
saisie
Inline validation in forms
Slide 84
Slide 84 text
Attention au contenu de vos messages
Slide 85
Slide 85 text
•
Expliquer ce qui n’a pas fonctionné et
comment le résoudre
Slide 86
Slide 86 text
Penser à
sauvegarder les
données
(perte de connexion,
rafraîchissement
accidentel de la page,
etc.)
Slide 87
Slide 87 text
C’est le moment de
faire preuve d’humour
et de créativité !
Slide 88
Slide 88 text
Envoyons ce formulaire
Ça serait dommage de s’arrêter en si bon chemin, non ?
Slide 89
Slide 89 text
Ne jamais masquer le bouton de soumission
Slide 90
Slide 90 text
Si vous avez
plusieurs actions,
l’action principale
doit être visible du
premier coup d’oeil
Slide 91
Slide 91 text
Utiliser des
verbes d’action
clairs et précis
Slide 92
Slide 92 text
Et encore une fois :
pensez aux états
des boutons au
touch
Slide 93
Slide 93 text
Ce qu’il faut retenir
Les points clés pour briller au bureau lundi matin
Slide 94
Slide 94 text
• Réduire le nombre de champs
peut aider à condition de tester
• Demander les informations à
l’utilisateur.rice en contexte
l’encourage à les fournir
• Labels clairs, concis au dessus
des champs en portrait / à
gauche en paysage
• Utiliser des descriptions de
champ pour aider à remplir
• Attention aux placeholders
Slide 95
Slide 95 text
• Penser à la taille des champs/
boutons et aux retours au touch
• Utiliser les types HTML5 pour
invoquer un clavier qui facilite le
remplissage
• Utiliser les menu déroulants en
dernier recours
• Réduire le nombre d’interactions
• Utiliser les capacités des
appareils
Slide 96
Slide 96 text
• Prévenir les erreurs tout au
long du remplissage
• En cas d’erreur, expliquer à
l’utilisateur.rice ce qui n’a pas
fonctionné et comment
corriger
• Proposer un call to action
simple, concis et affordant
• Tester, avec des gens et sur de
vrais appareils, plusieurs fois !
Slide 97
Slide 97 text
Web & UX designer.
www.stephaniewalter.fr @WalterStephanie
Illustration par Laurence V.
Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR)
inpx.it/mobiform-bwm2016