MENU

01. // About Me

02. // Expérience

03. // Réalisations

04. // Services

05. // Blog

06. // Contact

Paul Fauconnier Paul Fauconnier Paul Fauconnier
Les formulaires en UX design

Auteur : Unsplash.com

< Retour aux articles

UX/UI Design

Les formulaires en UX design

22 / 12 / 2020

Temps de lecture : 5 minutes

L’UX design (User Expérience ou Expérience Utilisateur en français) est appliquée à l’ensemble de votre site web et même à vos formulaires qui sont souvent la dernière barrière entre vous et votre utilisateur.

Les formulaires ? Un léger topo ?

Les formulaires en UX design

Auteur : Unsplash.com

Que vous utilisiez vos formulaires pour un contact ou une commande sur un e-commerce, les conseils qui suivent sont faits pour vous aider à ne pas perdre votre utilisateur. 

Positionner correctement vos formulaires


Les formulaires en UX design

Auteur : Unsplash.com

Pensez aux étapes : Dans les formulaires denses, il est primordial d’ajouter cette fameuse barre de progression qui vous permet de ne pas perdre ses utilisateurs. Vous allez donc créer une hiérarchisation chez l’utilisateur, cela réduit la longueur visuelle de votre formulaire et permet donc de rapprocher le bouton de validation.

Hiérarchisez les champs : La hiérarchisation des champs permet de laisser s’exprimer l’internaute : si l’internaute clique sur le bouton “filtre“, c’est qu'il souhaite rechercher par une certaine catégorie. Il faut donc hiérarchiser les sens de priorité des utilisateurs pour réorganiser l’interface. 

Le positionnement des labels : Les labels permettent d’indiquer la nature d’un champ dans le formulaire. Trois points pour bien les positionner et ne pas confondre l’utilisateur :

  • Des labels toujours visibles : on évite de mettre le label dans le champ car celui-ci doit toujours être visible (mais on peut quand même le doubler en placeholder à l’intérieur du champ).
  • Confort de lecture : on évite de mettre le label à gauche. Nous lisons en effet de gauche à droite, mais il moins fatigant de lire de haut en bas !
  • LE PETIT PLUS : les labels proposés par Google en “material design” sont efficaces.

Réduction de l’effort : Un clic est un clic ! Pour un utilisateur journalier de la plateforme la simplification / destruction de sélect est une bonne nouvelle. En effet, le clic pour l’apparition des choix disparait. Malheureusement cette pratique  insinue que le formulaire sera plus long…

L'étape intermédiaire pourrait être la “semi-développée“. En effet, nous avons juste deux ou trois cases qui contiennent les choix ‘favoris' et un bouton qui appelle un menu sélect. Cette méthode est quitte ou double car elle est pratique si votre choix est présent dans les boutons, mais pénible s’il faut aller dans le menu sélect.

LE PETIT PLUS : Proposer des pictos plutôt que des boutons radios ou des cases à cocher. Les visuels sont beaucoup plus incitatifs !

La logique des boutons : Au delà du formulaire, respecter une logique et la hiérarchisation des boutons permet d’optimiser un peu plus l’incitation au clic.

  • Visibilité : Les boutons doivent absolument rester visibles pour l’utilisateur autant que possible. C’est un repère visuel implicite pour l’utilisateur.
  • Primaire et secondaire : Pour optimiser la conversion, le bouton d’action positif (validation, enregistrement…) doit être plus fort visuellement que le bouton d’abandon ou de suppression.
  • LE PETIT PLUS : Pour réduire l’effort, on essaye de rassembler les boutons d’action dans la même zone.

Bien gérer l’UX design de ses formulaires

L’affordance : Portons une attention particulière à l’ergonomie. Voici un petit focus sur le principe d’affordance.

En soit, dimensionner les tailles des champs permet de donner une indication implicite à la quantité de données attendue.

Exemple : Le code postal est un champ à 5 chiffres. Il n’y a donc pas besoin de beaucoup de place comparé à un champ “prénom” par exemple.

L’utilisateur est donc guidé sur les actions attendues. Ainsi, si certains champs sont plus courts, la sollicitation sera psychologiquement moins forte.

Les messages d’erreurs : Y a t-il quelque chose de plus frustrant qu’un formulaire qui ne marche pas ? Ou pire, qui ne vous indique pas où est l’erreur? Pour résoudre ce problème il faut :

  • L’accompagner : si l'utilisateur est accompagné dans le remplissage du formulaire, le taux d’erreur sera logiquement diminué.
  • Être précis : indiquer directement quel champ est concerné par une erreur plutôt que de signifier au-dessus du formulaire que des erreurs sont présentes.
  • Restons positif : Si un champ est bien renseigné il faut l’indiquer à l’internaute.

L’obligation : Pour des raisons de re-qualification ou de gestion des leads, certains champs sont bien souvent obligatoires. Voici quelques éléments pour simplifier le principe de champs obligatoires :

  • Obligatoire : Si plusieurs champs sont obligatoires, proposez une mention globale “tous les champs sont obligatoires”.
  • Optionnel : S’il y a moins de champs optionnels que de champs obligatoires, apposez la mention “optionnel” sur ces champs. Ceci aura pour effet d’alléger la contrainte de devoir renseigner les champs obligatoires.
  • À ADAPTER  : Si un champ est optionnel, à quoi bon l’inclure dans le formulaire ? 
Le nombre de champs. : 

  • Qualification riche en “one shot” : proposer un formulaire très riche pour recueillir les informations les plus poussées.
  • Re-qualification manuelle : demander le minimum d’informations pour une mission rapide sans besoins poussés.
Thématiser le formulaire : Si le formulaire est long, il est conseillé de l’organiser en étape. Pour encore plus d’efficacité, thématiser votre formulaire le rendra encore plus compréhensible par l’utilisateur :

  • Informer : En créant des chapitres thématiques dans le formulaire, l’utilisateur sait quelles informations vont lui être demandées.
  • Faire gagner du temps : Couplé à un étapier, votre formulaire thématisé permettra à l’internaute d’anticiper, encore plus, le temps nécessaire pour remplir le formulaire et lui permettra une relecture plus simple et plus rapide.
La validation : Rien de plus frustrant que de compléter un formulaire de contact sans message clair et explicite de validation. Les pages de confirmation sont bien souvent oubliées ou peu soignées, voici pourquoi il ne faut pas les négliger :

  • Accomplissement : elles confirment à l'utilisateur qu’il a bien renseigné le formulaire. C’est un effort qu’il faut féliciter.
  • Rebond : profitez de cette page pour relancer l’internaute sur le site ou sur des pages précises.

Paul Fauconnier

Paul Fauconnier

Designer & Développeur web

©2020 Paul Fauconnier

Faites savoir que vous avez aimé l’article !