Aidez moi à remplir vos formulaires mobile !

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

Bluetooth, beacons et plus si affinité ?

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