Une bonne page d'accueil a un seul but : inciter les visiteurs à se convertir dès maintenant. Malheureusement, l'un des plus grands obstacles aux conversions sur les pages d'atterrissage sont ces formulaires ennuyeux. Maîtrisez l'art de la conception des formulaires de pages d'atterrissage et vous constaterez une amélioration instantanée des conversions. Et pour vous aider à y parvenir, nous avons rassemblé les meilleures pratiques et les exemples dont vous pouvez vous inspirer aujourd'hui. Parce que c'est ce que nous faisons 24/7, afin d'obtenir les meilleures pistes pour le marché immobilier européen.

Comprendre les bases des formulaires 

Avant d'aborder la question de l'optimisation de vos formulaires de page de renvoi, il est important de mieux comprendre les différents aspects qui composent un formulaire de page de renvoi :

• Structure: La structure de votre formulaire de page de renvoi comprend l'ordre des champs de saisie, l'apparence générale du formulaire (couleur, taille, espace blanc) et la mise en page, ainsi que les éléments de transition (Placement CTA; pop-up, glissant ou stagnant).
• Champs de saisie: Un champ de saisie, également appelé champ de formulaire ou champ, est la case dans laquelle un utilisateur tape ou sélectionne pour saisir des informations. Il s'agit des différentes sections sur lesquelles l'utilisateur clique pour remplir quoi que ce soit.
• Étiquettes de terrain: Les étiquettes de champ décrivent l'objectif et la fonction des éléments de formulaire. Ils permettent à vos utilisateurs de savoir ce qu'ils soumettent dans les champs de saisie. Par exemple, si un formulaire demande votre anniversaire, une étiquette de champ est l'étiquette "mois" à côté d'un menu déroulant de mois listés.
• Assistance: Sur certaines pages d'accueil, les entreprises incluent des explications, des conseils pratiques ou des fenêtres contextuelles pour aider les utilisateurs à remplir un formulaire. Cela permet d'offrir une expérience plus fluide et plus utile aux utilisateurs.
• Validation: Un champ de validation vous permet de vérifier automatiquement si les informations remplies par un utilisateur sont valides ou non. Un exemple courant de validation concerne les adresses électroniques.
• Appel à l'action : Abrégé en CTA ou échangé avec un bouton d'action, un appel à l'action est le bouton qui se trouve à la fin d'un formulaire de page d'accueil. Ce bouton permet à l'utilisateur de soumettre le formulaire.
• Message de remerciement: Lorsqu'un utilisateur soumet correctement toutes les informations nécessaires et clique sur l'OTC, un message en texte clair s'affiche automatiquement : ?Merci d'avoir rempli notre formulaire. ?

  Cette solution est plus simple qu'une page de remerciement complète, et elle permet quand même à l'utilisateur de savoir que le formulaire est complet. Elle peut même inclure les prochaines étapes à suivre par l'utilisateur, comme la confirmation d'une adresse électronique ou l'ouverture d'une session pour terminer l'enregistrement.

Ces termes sont les bases de la création d'un formulaire de page de renvoi, et chaque élément vous permet d'optimiser cette partie de l'expérience numérique de votre utilisateur. En créant un formulaire de page de renvoi optimisé, vous augmentez le taux de conversion et transformez les visiteurs du site web en prospects de qualité. 

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.