Embed Size (px)
Citation preview
Aidez-moi à remplir vos formulaires mobile !
Stéphanie Walter — @WalterStephanie
Web & UX designer.
Accro au Mobile. HTML et CSS Lover.
www.stephaniewalter.fr @WalterStephanie
Illustration par Laurence V.
Simplification des formulaires
Ou pourquoi ça ne fonctionne pas toujours
L’étude 11-4 et le taux de conversion de 120% que tout le monde cite
Version réduiteVersion de base
Pourquoi ça peut marcher ?La technique du « pied dans la porte »
Demander les informations en contexte augmente les chances que l’utilisateur.rice les
fournisse
Parfois supprimer des champs est contreproductif
Version de base Version réduite
- 14.23%
Parfois supprimer des champs est contreproductif
+ 19.21%
Version retravailléeVersion de base
Tester
• Le temps de complétion
• Le taux d’abandon
• Les points d’accrochage
• La frustration
utilisateur.rice
Prioriser la lisibilité et la compréhension
Optimisation des labels, inputs, descriptions et placeholders
Le formulaire devrait se baser sur le modèle mental de l’utilisateur.rice, pas votre base de
donnée !
Optimisation des labels
En portrait : placer le label au dessus du champ
En paysage : placer le label à gauche du champ
Le clavier peut prendre ½ de l’espace : rendre les champs compréhensibles sans contexte
Éviter le tout majusculePrévoir des labels clairs et concis
Optimisation des descriptions de champs
Comprendre ce qu’on me demande
Comprendre pourquoi le site a besoin de l’information
Comprendre où trouver l’information
Comprendre comment je vais devoir la formater
Les placeholders, cette fausse bonne idée
Un champ avec du contenu attire moins l’attention qu’un champ vide qui peut sembler déjà pré-rempli
Bannir le « tout placeholder »
Sauf pour les formulaires courts(recherche, login)
Le « floating label », une solution hybride
Disposition et mise en page
Marquer les champs optionnels et obligatoires (surtout pour les longs formulaires)
Prévoir la localisation le plus tôt possible
Les contraintes de l’écran mobile
S’adapter au touch et à la taille de l’appareil
Lier les labels aux champs
<label for="username">
Votre nom
</label>
<input id="username" type=… />
Paddings et margins CSS pour faciliter les interactions au touch
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);
}
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;
}
Attention à respecter l’ordre des champs avec les aides du clavier iOS (attention au tab-index)
Faciliter le remplissage des champs
Inputs HTML5, claviers dédiés et masques de champs
De manière générale, faire en sorte que le champ ait la taille du contenu souhaité
Adresse email
<input type="email" id="email" name="email" />
URL de site
<input type="url" id="url" name="url" />
Date
<input type="date" id="bdate" name="bdate" />
Quantité et format numérique
<input type="number" id="quantity" name="quantity" />
Pattern et inputmode
<input type="number" id="quantity" name="quantity »
pattern="[0-9]*" inputmode="numeric" />
Numéro de téléphone
<input type="tel" id="phone" name="phone" />
Champ de recherche
<input type="search" id="search" name="search" />
Couleur et range
<input type="color" id="color" name="color" />
<input type="range" id="range" name="range" />
Autocapitalize, autocorrect et autocomplete
<input type="email" id="email" name="email" autocapitalize="off"
autocorrect="off" autocomplete="email" />
Éviter de découper les champs
Préférer les masques de champ à la place
Réduire les interactions
Concevoir des éléments de formulaire plus efficaces sur mobile
N’utiliser les menus déroulants qu’en dernier recours
Remplacer les menu déroulants par de l’auto-complétion
Pour une date, référer un date-picker à plusieurs menus déroulants
Proposer des systèmes d’incrémenteurs pour les petites quantités
Image via Luke W.
Segments et boutons radio sont utilisables s’il y a peu d’options
Image via Luke W.
Découper l’interface en plusieurs étapes (list view)
Faciliter le remplissage
Faciliter l’inscription : réseaux sociaux, compte invité, etc.
Eviter de demander plusieurs fois la même information
Le focus directement dans le champ
<input type=”…" autofocus />
Auto-compléter les champs quand c’est possible(par exemple ici une adresse)
Auto-détecter le type de carte de crédit
Utiliser les capteurs de l’appareil
Géolocalisation, appareil photo, microphone comme nouveaux modes d’input
Géolocalisation HTML5 pour gagner du tempsDemande d’accès au GPS via le navigateur
Utilisation des medias
<input type="file" id="take-picture" accept="image/*">
Ouvrir directement l’appareil photo/ enregistreur audio
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="audio/*" capture="microphone">
Scanner le numéro de série au lieu de l’entrer à la main
iOS et scanner de carte de crédit
Attention aux demandes de permission dans le navigateur mobile
La gestion des erreurs
De la prévention à la correction des erreurs
Mieux vaut prévenir que guérir
Attention à vos options par défaut
Restreindre les choix pour guider intelligemment
Informer l’utilisateur.rice des contraintes
Afficher / masquer le mot de passe pour éviter les erreurs
Aider l’utilisateur.rice à réparer ses erreurs
Préférer la validation des champs en ligne
Préférer le jaune et orange au rouge trop anxiogène
(attention à l’accessibilité)
Ne pas utiliser la couleur comme unique indication d’erreur
Validation HTML5 proposée par le navigateur
Validation en temps réel au fur et à mesure de la saisie
Champ valide / non rempli : lancer la validation une fois le champ rempli
Inline validation in forms
Champ qui a été marqué comme invalide : lancer la validation durant la saisie
Inline validation in forms
Attention au contenu de vos messages
•
Expliquer ce qui n’a pas fonctionné et comment le résoudre
Penser à sauvegarder les données (perte de connexion, rafraîchissement accidentel de la page, etc.)
C’est le moment de faire preuve d’humour et de créativité !
Envoyons ce formulaire
Ça serait dommage de s’arrêter en si bon chemin, non ?
Ne jamais masquer le bouton de soumission
Si vous avez plusieurs actions, l’action principale doit être visible du premier coup d’oeil
Utiliser des verbes d’action clairs et précis
Et encore une fois : pensez aux états des boutons au touch
Ce qu’il faut retenir
Les points clés pour briller au bureau lundi matin
• 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
• 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
• 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 !
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
