Les formulaires à plusieurs étapes sont plus performants que les formulaires à une seule étape
Nous constatons que les formulaires à plusieurs étapes sont plus performants que ceux à une seule étape.les versions par étapes, encore et encore. Nous avons testé cela sur différents formulaires de pages de renvoi. Les chiffres nous disent que les gens trouvent les formulaires à plusieurs étapes moins intimidants, ce qui augmente le nombre de d'utilisateurs qui commencent à les remplir et le nombre de ces qui les complètent.
Réduire au minimum le nombre total de champs
Chaque champ que vous demandez aux utilisateurs de remplir nécessite un certain effort. Plus l'effort nécessaire pour remplir un formulaire est important, moins les utilisateurs sont susceptibles de le remplir. C'est pourquoi la règle fondamentale de la conception des formulaires des pages d'accueil est la suivante : plus court est mieux c'est ? débarrassez-vous de tous les champs non essentiels.
De nombreux designers connaissent l'UE.moins, c'est plus? ; ils posent néanmoins des questions supplémentaires pour tenter de recueillir davantage de données sur leurs utilisateurs. Il peut être tentant de collecter plus de données sur vos utilisateurs lors de l'inscription initiale, mais résistez à cette tentation. Pensez-y de cette manière : Chaque champ supplémentaire que vous ajoutez à votre formulaire augmente le risque de perdre un utilisateur potentiel. L'information que vous obtenez d'un champ vaut-elle la peine de perdre de nouveaux utilisateurs ? N'oubliez pas que, tant que vous avez recueilli les coordonnées d'un utilisateur, vous pouvez toujours faire un suivi en demandant d'autres données.
Offre axée sur le terrain
Mettez au point automatiquement le premier champ de saisie de votre formulaire. Mise au point automatique un champ donne à l'utilisateur une indication et un point de départ, afin qu'il puisse rapidement commencer à remplir le formulaire. Vous réduisez ainsi le coût de l'interaction, ce qui évite à l'utilisateur d'avoir à taper inutilement sur le clavier.
Faites en sorte que le champ de saisie actif soit proéminent et ciblé. L'objectif du champ lui-même doit être clair comme de l'eau de roche ? les utilisateurs doivent pouvoir comprendre d'un seul coup d'œil où se trouve l'objectif. Il peut s'agir d'une couleur de bordure accentuée ou d'un fondu enchaîné de la boîte.
Utiliser le contraste à plein effet
La plupart des formulaires de page d'accueil ne parviennent pas à tirer le meilleur parti du contraste. En plus d'aider les utilisateurs à naviguer dans un formulaire, une bonne utilisation du contraste peut réduire les distractions potentielles des autres éléments de la page.
Le contraste est également un autre facteur important dans l'optimisation des formes pour le mobile. N'oubliez pas que les gens peuvent se trouver à l'extérieur ou dans des endroits très éclairés, ce qui rend les dessins à faible contraste presque impossibles à utiliser.
Éviter les menus déroulants
Dropdowns sont particulièrement mauvaises pour les mobiles car les éléments effondrés rendent le processus de saisie des données plus difficile sur un petit écran : Pour placer des options dans un menu déroulant, il faut appuyer deux fois sur la touche et les masquer.
Si vous utilisez un menu déroulant pour la sélection des options, pensez à le remplacer par des boutons radio. Ils rendront toutes les options visibles et réduiront également le coût de l'interaction ? les utilisateurs peuvent taper sur l'élément et le sélectionner en même temps.
Utiliser les caractères de remplissage et les entrées masquées
L'incertitude du formatage est l'un des problèmes les plus importants de la conception des formulaires de pages de renvoi. Ce problème a un lien direct avec l'abandon du formulaire ? lorsque les utilisateurs sont incertains du format dans lequel ils doivent fournir les données, ils peuvent rapidement abandonner le formulaire. Il y a plusieurs choses que vous pouvez faire pour rendre le format clair.
Texte de remplacement
Le texte dans un champ de saisie peut indiquer aux utilisateurs le contenu attendu. Le texte de remplacement n'est pas nécessaire pour les champs simples tels que "Nom complet", mais il peut être extrêmement utile pour les champs qui nécessitent des données dans un format spécifique. Par exemple, si vous concevez une fonctionnalité de recherche pour le suivi d'un colis, il serait bon de fournir un exemple de numéro de suivi en tant qu'espace réservé au champ "numéro de suivi".
Il est essentiel que le formulaire de votre page de renvoi fasse une distinction visuelle claire entre le texte du caractère de remplacement et la valeur réelle saisie par l'utilisateur. En d'autres termes, le texte du caractère de remplacement ne doit pas ressembler à une valeur prédéfinie. Sans une distinction visuelle claire, les utilisateurs pourraient penser que les champs contenant des caractères de remplacement ont déjà des valeurs.
Entrée masquée
Le masquage de champ est une technique qui aide les utilisateurs à formater le texte saisi. De nombreux concepteurs confondent le field masking et le texte de remplacement ? ce n'est pas la même chose. Contrairement aux caractères de remplissage, qui sont essentiellement du texte statique, les masques formatent automatiquement les données fournies par l'utilisateur. Dans l'exemple ci-dessous, les parenthèses, les espaces et les tirets apparaissent automatiquement à l'écran lors de la saisie d'un numéro de téléphone.
La saisie masquée permet également aux utilisateurs de valider facilement les informations. Lorsqu'un numéro de téléphone est affiché par morceaux, il est plus facile de trouver et de corriger une faute de frappe.
Fournir le clavier correspondant
Les utilisateurs mobiles apprécient les applications et les sites web qui proposent un clavier adapté au domaine.
Cette fonctionnalité les empêche d'effectuer des actions supplémentaires. Par exemple, lorsque les utilisateurs doivent saisir un numéro de carte de crédit, votre application doit uniquement afficher le clavier. Il est essentiel de mettre en œuvre la correspondance des claviers de manière cohérente dans l'ensemble de l'application (tous les formulaires de la page de destination de votre application devraient avoir cette fonctionnalité).
Définissez les types de saisie HTML pour afficher le clavier correct. Sept types de saisie sont pertinents pour la conception de formulaires de pages de renvoi.
- input type="text" affiche le clavier normal de l'appareil mobile.
- input type="email" affiche le clavier normal et '@' et '.com'.
- input type="tel" affiche le clavier numérique de 0 à 9.
- input type="number" affiche un clavier avec des chiffres et des symboles.
- input type="date" affiche le sélecteur de date de l'appareil mobile.
- input type="datetime" affiche le sélecteur de date et d'heure de l'appareil mobile.
- input type="month" affiche le sélecteur de mois et d'année de l'appareil mobile.
Utiliser une mise en page en une seule colonne
Plusieurs études ont montré que les formulaires à une seule colonne sont plus rapides à remplir que les formulaires à plusieurs colonnes. Les participants au test ont pu remplir un formulaire à colonne unique en moyenne 15,4 secondes plus rapidement qu'un formulaire à plusieurs colonnes.
Les colonnes multiples perturbent l'élan vertical d'un utilisateur ; avec des colonnes multiples, les yeux commencent à zigzaguer. Cela augmente considérablement le nombre de fixations des yeux et, par conséquent, le temps de réalisation. En outre, les formulaires à colonnes multiples peuvent soulever des questions inutiles chez l'utilisateur, comme "Par où commencer ?" et "Les questions de la colonne de droite ont-elles la même importance que celles de la colonne de gauche ?
Dans un dessin à une colonne, les yeux se déplacent dans une direction naturelle, de haut en bas, une ligne à la fois. Cela permet d'établir un chemin clair pour l'utilisateur. Une colonne est excellente pour les mobiles car les écrans sont plus longs verticalement, et le défilement vertical est un mouvement naturel pour les utilisateurs mobiles.
Immowi conception des formulaires
Nous sommes toujours à la recherche du meilleur design de forme qui réponde aux besoins de nos clients. Afin de garantir la qualité de l'offre immobilière, nous incluons plus de questions que la moyenne des spécialistes du marketing. Nous pourrions simplement vous demander vos coordonnées, mais si vous élargissez votre liste de questions, les personnes qui sont prêtes à remplir l'ensemble du formulaire seront finalement plus impliquées et plus intéressées par le produit, notamment en ce qui concerne l'immobilier. Un Page d'accueil d'Immowi est donc toujours un peu plus long que les simples formulaires de contact que l'on trouve sur Internet.
