4 astuces UX de création de formulaires à connaître (avec exemples)

Nous avons tendance à penser que les formulaires sont simplement un moyen de collecter des données utilisateur, mais ils sont également à sens unique, parfois. la seule manière, pour nos utilisateurs Connecte-toi avec nous. Il est probablement délirant de penser que nous pouvons faire en sorte que les utilisateurs amour remplir des formulaires, mais c'est certainement possible pour trouver des solutions qui ne les ennuient pas trop, et les aider tout au long du processus.

En naviguant sur Internet, nous pouvons trouver des solutions parfois surprenantes, correctes par programme, mais conçues de manière à oblige de nombreux utilisateurs à quitter le site en raison de la mauvaise expérience utilisateur.

Si nos formulaires sont bien conçus, nous pourrons non seulement plaire à nos utilisateurs, mais également à l’équipe de gestion qui peut traiter beaucoup moins d'erreurs de saisie de l'utilisateur. Ainsi, dans cet article, nous allons voir comment nous pouvons minimiser les erreurs de saisie de l'utilisateur et encore garder nos utilisateurs heureux.

Anticiper les besoins des utilisateurs

Les sites Web et les applications ont différentes bases d'utilisateurs et objectifs, et même un même emplacement peut héberger de nombreux formulaires qui collectent différents types de données, pour n'en nommer que les plus fréquentes:

• Formulaires de connexion
• Formulaires d'inscription
• Formulaires de profil utilisateur
• Formulaires d'inscription à la newsletter
• Formulaires de caisse
• Sondages auprès des utilisateurs
• Formulaire de contact
• Formulaires de commentaires
• Formulaires de recherche

Tous ces types de formulaire exiger des choses différentes. Lors de la conception d'un formulaire de commande, il est essentiel de garantir de manière crédible la sécurité des utilisateurs. Dans le cas des formulaires de commentaires, il est conseillé de: ajouter des émoticônes ou d'autres méthodes permettant aux utilisateurs d'exprimer leur humeur réelle.

Cependant, même des types de formulaire similaires peuvent nécessiter une conception différente, car tous les sites ont leur base d'utilisateurs unique. Avant de nous lancer dans le processus de conception, il est toujours bon de anticiper ce dont nos utilisateurs ont besoin, et concevoir en conséquence.

Exemple: connexions sociales ciblant les besoins des utilisateurs

Le formulaire de connexion de Codepen contient trois connexions sociales avec Github en haut. Ce choix serait déraisonnable pour la plupart des sites.

Mais c'est parfait pour Codepen, car leur base d'utilisateurs est constituée de développeurs, dont beaucoup voudront se connecter avec leurs comptes Github ou connecter leurs comptes de développement les uns avec les autres en même temps.

Pensez d'abord au mobile

Les utilisateurs mobiles et de bureau ont des besoins différents, mais remplir des formulaires est un défi beaucoup plus grand sur un écran mobile, en utilisant des gestes de la main que sur un clavier physique, un approche mobile d'abord peut nous amener plus loin quand nous voulons concevoir des formes utilisables.

En outre, de nombreux modèles d'interface utilisateur fonctionnant bien sur un téléphone mobile fonctionnent également sur un ordinateur de bureau..

Exemple: contrôles tappables

Des formulaires mobiles de haute qualité ne peuvent être imaginés sans contrôles visibles sur lequel les utilisateurs mobiles peuvent facilement exploiter avec leurs doigts.

Le formulaire d’inscription à la newsletter de la conférence de conception Web An Event Apart s’adapte à la manière dont les utilisateurs de mobile accèdent à l’écran - il contient deux champs faciles à saisir et un bouton du bout des doigts.

Les champs de saisie de texte sont plus hauts, comme d’habitude, pour que les utilisateurs mobiles puissent facilement les utiliser, et le gros bouton orange avec une coche incite également les utilisateurs à envoyer le formulaire..

La version de bureau du site utilise la même conception de formulaire, comme il a également l'air bien et fonctionne bien sur les grands écrans.

Exemple: entrée utilisable

Lors de la conception de formulaires pour mobile, il est toujours important de réfléchir à la manière dont nous pouvons minimiser l'espace que nous utilisons. le intrants consomptibles Le modèle de conception d'interface utilisateur est devenu très populaire ces derniers temps et fonctionne particulièrement bien sur mobile.

Booking.com exploite ce modèle dans le formulaire de recherche sur son site mobile. Lorsque l'utilisateur appuie sur le champ de recherche, il se développe pour laisser plus d'espace pour les gestes, et une liste de sélection avec des recommandations apparaît également en dessous.

Lorsque l'utilisateur appuie hors du champ, il réduit et les informations supplémentaires disparaissent.

Exemple: bouton de morphing

Boutons morphing aller encore plus loin dans le modèle de données consommable, car les utilisateurs voient d’abord un bouton, qui se transforme en une forme quand ils tapent dessus.

La capture d'écran ci-dessous est extraite du brillant article de The Startup sur la conception de formulaires innovante, qui présente également de nombreuses autres solutions créatives..

Faciliter la prise en charge

Les longs formulaires ont tendance à dissuader les utilisateurs. Le mieux que nous puissions faire est de demandez seulement l'entrée dont nous avons vraiment besoin. Ce n'est pas seulement important du point de vue de l'expérience utilisateur, mais les utilisateurs peuvent également hésiter à donner trop d'informations personnelles en raison de: problèmes de confidentialité.

Parfois, cependant, nous encore doivent aller avec des formes plus longues. Dans ce cas c'est une bonne idée de les couper en morceaux plus petits, et servir les morceaux comme des écrans successifs.

De nombreux sites de commerce électronique (Amazon, par exemple) utilisent cette solution pour réduire les taux d'abandon de panier..

Si nous voulons faciliter le remplissage des champs de formulaire, la règle de base est de: réduire les distractions et les actions de l'utilisateur autant que possible.

Exemple: sélecteur de saisie personnalisé

Différents sélecteurs de contenu, tels que les sélecteurs de date ou de couleur, facilitent non seulement la saisie de la bonne entrée, mais rendent également le formulaire plus attirant, et de manière significative réduire les erreurs des utilisateurs.

L'application de prise de liste Todoist donne des conseils personnalisés dans son sélecteur de date lorsque l'utilisateur survole les jours.

Par exemple, sur la capture d'écran ci-dessous, l'utilisateur peut voir que, pour le 31 août, il a déjà 2 tâches à accomplir et qu'il peut tenir compte de ces informations pour choisir la bonne date pour les tâches. C'est une excellente idée pour une application où la productivité est la principale préoccupation de l'utilisateur.

Exemple: entrée glisser-déposer

Dessins glisser-déposer fonctionne généralement bien avec les champs de téléchargement de fichiers, en particulier lorsque les utilisateurs sont supposés télécharger des images.

Ils ne réduisent probablement pas autant les actions des utilisateurs que le bouton Télécharger un fichier, mais ils facilitent beaucoup la tâche. choisissez le fichier que l'utilisateur veut télécharger, réduisant ainsi les chances de soumettre un mauvais fichier.

WordPress.com fournit une interface de saisie utilisateur élégante et intuitive par glisser-déposer dans son formulaire d'édition d'éditeur. le petites vignettes et le représentation visuelle des fichiers déjà téléchargés aider davantage les utilisateurs à exécuter rapidement le téléchargement.

Exemple: superposition pour supprimer les distractions

Si les utilisateurs sont distraits en remplissant notre formulaire, ils sont plus enclins aux erreurs et se fâchent plus facilement.

Superposition de contenu sont une excellente alternative au design de forme minimaliste. Ils sont utilisés par des sites plus complexes qui veulent afficher différents types d'informations sur le même écran.

Sur la capture d'écran ci-dessous, vous pouvez voir la version de bureau de Booking.com. Lorsque les utilisateurs survolent dans le formulaire de recherche, le reste du contenu devient recouvert d'une couche grisâtre pour les aider rester concentré sur le processus de remplissage de formulaire.

Donner des commentaires aux utilisateurs

Donner le bon retour au bon moment peut considérablement améliorer l'expérience utilisateur.

Dans la conception de formulaire, il y a deux types de commentaires des utilisateurs:

1. Commentaires donnés avant soumission de formulaire - afin de réduire les erreurs et taux d'abandon des formulaires, tels que les suivis de progression, la validation d'entrée instantanée qui récompense immédiatement les utilisateurs pour la saisie correcte, ou les info-bulles d'assistance
2. Commentaires donnés après soumission de formulaire - afin de faire savoir aux utilisateurs ils ont commis une erreur, tels que les messages d'erreur

Le type de commentaires des utilisateurs dont nos utilisateurs ont grandement besoin dépend des caractéristiques de notre public cible et de l'objectif de notre site..

Exemple: suivi de la progression

Les formulaires de plus d'une page, tels que les sondages et la plupart des formulaires de commande de commerce électronique, peuvent tirer parti du suivi des progrès design pattern. Les trackers de progrès donnent une retour visuel instantané aux utilisateurs sur leur statut et les encourager à poursuivre le processus.

L’application Web créateur de sondages SnapSurveys affiche un petit suivi de la progression juste au-dessus des boutons de soumission afin que les utilisateurs puissent naturellement apercevoir.

Le suivi des progrès n'utilise pas d'étiquettes, mais la façon dont il est conçu fait son objectif clair - le nombre de cercles indique le nombre d'étapes, les étapes déjà exécutées deviennent bleues et les utilisateurs peuvent facilement voir combien d'étapes sont encore devant eux.

Exemple: validation en temps réel

Le détaillant de cosmétiques The Body Shop utilise validation en temps réel sur son formulaire de profil utilisateur pour éliminer les erreurs et améliorer l'UX du processus de complétion du formulaire.

Les entrées sont vérifiées pendant que les utilisateurs remplissent le formulaire, et les bonnes et les mauvaises réponses sont immédiatement indiquées par icônes faciles à distinguer un peu plus à droite mais toujours dans la zone visible.

Exemple: info-bulles expressives

Microcopie compréhensible est également un élément essentiel du retour d'information des utilisateurs lors de la conception de formulaires. Par définition, la microcopie d’un site Web consiste en petits morceaux de texte utilisé dans différents éléments - étiquettes, boutons, messages d'erreur, info-bulles, etc..

Dans son formulaire de connexion, le groupe bancaire de Barclay répond aux questions que les utilisateurs pourraient éventuellement poser à l'aide de infobulles bien conçues cela comprend microcopie facile à comprendre.

Les infobulles sont cachées derrière peu? des icônes ne pas distraire les utilisateurs qui savent comment remplir le formulaire de connexion, mais être toujours présent pour les utilisateurs qui ne savent pas.

Certaines infobulles contiennent même un petit visuel d'une carte de débit annotée afin que les utilisateurs puissent facilement trouver les données qu'ils doivent entrer dans le formulaire de connexion.