Meilleures pratiques pour la conception de formulaires mobiles

Les utilisateurs peuvent hésiter à remplir des formulaires. C'est pourquoi, en tant que concepteurs, notre objectif est de simplifier au maximum le remplissage d'un formulaire. Nick partage certaines techniques qui peuvent vous aider à concevoir des formulaires efficaces.

(Cet article est aimablement sponsorisé par Adobe.) Les formulaires sont le pivot de toutes les interactions mobiles; il se situe entre la personne et ce qu'elle recherche. Chaque jour, nous utilisons des formulaires pour des activités en ligne essentielles. Rappelez-vous la dernière fois que vous avez acheté un billet, réservé une chambre d'hôtel ou effectué un achat en ligne – probablement que ces interactions contenaient une étape pour remplir un formulaire.

Les formulaires ne sont qu'un moyen de parvenir à une fin. Les utilisateurs doivent être en mesure de les compléter rapidement et sans confusion. Dans cet article, vous apprendrez des techniques pratiques qui vous aideront à concevoir un formulaire efficace.

Ce qui constitue une forme efficace

L'objectif principal de chaque formulaire est de le compléter. Deux facteurs ont un impact majeur sur le taux d'achèvement:

• Perception de la complexité
  La première chose que font les utilisateurs lorsqu'ils voient un nouveau formulaire est d'estimer le temps nécessaire pour le compléter. Les utilisateurs le font en scannant le formulaire. La perception joue un rôle crucial dans le processus d'estimation. Plus un formulaire est complexe, plus les utilisateurs risquent d'abandonner le processus.
• Coût d'interaction
  Le coût d'interaction est la somme des efforts, à la fois cognitifs et physiques, que les utilisateurs interagissent avec une interface pour atteindre leur objectif. Le coût d'interaction est directement lié à la facilité d'utilisation du formulaire. Plus les utilisateurs doivent faire d'efforts pour remplir un formulaire, moins le formulaire est utilisable. Un coût d'interaction élevé peut être le résultat de données difficiles à saisir, de l'incapacité à comprendre la signification de certaines questions ou de la confusion concernant les messages d'erreur.

Les composants des formulaires

:

• Champs de saisie
  Ceux-ci incluent les champs de texte, les champs de mot de passe, les cases à cocher, les boutons radio, les curseurs et tout autre champ conçu pour être saisi par l'utilisateur.
• Structure
  Cela inclut l'ordre des champs, l'apparence du formulaire sur la page et les connexions logiques entre différents champs.
• Boutons d'action
  Le formulaire aura au moins un appel à l'action (le bouton qui déclenche la soumission de données.
• Feedback
  Feedback informe l'utilisateur du résultat d'une opération. La rétroaction peut être positive (par exemple, indiquer que le formulaire a été envoyé avec succès) ou négative (dire quelque chose comme «Le numéro que vous avez fourni est incorrect»).

Cet article couvre de nombreux aspects liés à la structure, étiquettes, boutons d'action et validation. La plupart des points mentionnés dans cet article ont un effet visuel et n’existent pas; tous ces exemples ont été créés à l'aide de Adobe XD .

Champs de saisie

En matière de conception de formulaires, le concept le plus important est de minimiser la saisie. Réduire l'effort de saisie est essentiel. Les concepteurs peuvent atteindre cet objectif en se concentrant sur la conception des champs de formulaire.

Réduire le nombre total de champs

Chaque champ que vous demandez aux utilisateurs de remplir nécessite quelques efforts. Plus il faudra d'efforts pour remplir un formulaire, moins les utilisateurs rempliront le formulaire. C'est pourquoi la règle fondamentale de la conception de formulaires est plus courte est mieux – se débarrasser de tous les champs essentiels.

Baymard Institute a analysé des formulaires de paiement trop longs est l'une des principales raisons de l'abandon lors de la validation. L'étude a révélé que la caisse moyenne contenait près de 15 champs de formulaire. La plupart des services en ligne pourraient réduire de 20 à 60% le nombre de champs affichés par défaut.

Beaucoup de concepteurs sont familiarisés avec la règle du "moins est plus"; cependant, ils posent des questions supplémentaires pour tenter de rassembler plus de données sur leurs utilisateurs. Il pourrait ê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 façon: avec chaque champ supplémentaire que vous ajoutez à votre formulaire, vous augmentez les chances de perdre un utilisateur potentiel. Les informations que vous gagnez dans un domaine sont-elles intéressantes à perdre de nouveaux utilisateurs? Rappelez-vous que, tant que vous avez collecté les informations de contact d'un utilisateur, vous pouvez toujours effectuer une demande de données supplémentaires.

Distinguez clairement tous les champs facultatifs

Avant d'optimiser les champs facultatifs, demandez-vous incluez-les dans votre formulaire. Pensez aux informations dont vous avez vraiment besoin, pas à ce que vous voulez. Idéalement, le nombre de champs facultatifs de votre formulaire doit être zéro.

Si, après une session de brainstorming, vous souhaitez toujours inclure quelques questions facultatives dans votre formulaire, indiquez clairement aux utilisateurs que ces champs sont facultatifs:

• Cochez les champs facultatifs au lieu des champs obligatoires.
  Si vous demandez le moins possible, la grande majorité des champs de votre formulaire seront obligatoires. Par conséquent, ne marquez que les champs de la minorité. Par exemple, si cinq champs sur six sont obligatoires, il est judicieux de ne marquer qu'un seul champ comme facultatif.
• Utilisez le libellé "Facultatif" pour indiquer des champs facultatifs.
  ) signifie que tous les utilisateurs associent l'astérisque à des informations facultatives, et certains utilisateurs seront désorientés par la signification (un astérisque est souvent utilisé pour indiquer des champs obligatoires).

Champs de taille En conséquence,

Lorsque cela est possible, utilisez la longueur de champ comme valeur. La longueur d'un champ de saisie doit être proportionnelle à la quantité d'informations attendue sur le terrain. La taille du champ agira comme une contrainte visuelle – l'utilisateur saura combien de texte devrait être saisi simplement en regardant le champ.

Mise au point du champ d'offre

Mise au point automatique du premier champ de saisie de votre formulaire. La mise au point automatique d'un champ donne à l'utilisateur une indication et un point de départ, afin qu'il puisse rapidement remplir le formulaire. En faisant cela, vous réduisez le coût de l'interaction – en évitant à l'utilisateur un clic inutile.

Rendez le champ de saisie actif bien visible et concentré. Le focus sur le terrain lui-même devrait être limpide – les utilisateurs devraient être en mesure de comprendre en un 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é.

Ne demandez pas aux utilisateurs de répéter leur adresse e-mail

La raison pour laquelle un champ supplémentaire pour l'adresse e-mail est si populaire auprès des développeurs de produits est évidente: chaque entreprise souhaite minimiser les risques de rebonds (non par des adresses électroniques non valides). Malheureusement, suivre cette approche ne garantit pas que vous obtiendrez une adresse valide. Les utilisateurs copient et collent souvent leur adresse d'un champ à l'autre.

Fournissez l'option "Afficher le mot de passe"

La duplication du champ de saisie du mot de passe est une autre erreur courante chez les concepteurs de produits. Les concepteurs suivent cette approche car ils pensent qu’elle empêchera les utilisateurs de mal saisir un mot de passe. En réalité, un deuxième champ pour un mot de passe augmente non seulement les coûts d'interaction, mais ne garantit pas non plus que les utilisateurs procéderont sans erreur. Étant donné que les utilisateurs ne voient pas ce qu'ils ont saisi dans le champ, ils peuvent commettre la même erreur deux fois (dans les deux champs) et rencontrer un problème lorsqu'ils tentent de se connecter avec un mot de passe. Comme Jakob Nielsen résume:

La convivialité est compromise lorsque les utilisateurs saisissent les mots de passe et que la seule information reçue est une rangée de puces. En règle générale, le masquage des mots de passe n'augmente pas la sécurité, mais cela vous coûte cher en raison d'échecs de connexion.

Au lieu de dupliquer le mot de passe, fournissez une option permettant aux utilisateurs de visualiser le mot de passe Avoir une icône ou une case à cocher qui démasque le mot de passe lorsque vous cliquez dessus. Un aperçu de mot de passe peut être une opportunité pour les utilisateurs de vérifier leurs données avant de les envoyer.

Ne pas découper les champs de données

Ne coupez pas les champs lorsque vous demandez un nom complet, un numéro de téléphone ou une date de naissance. Les champs découpés obligent l'utilisateur à effectuer des pressions supplémentaires pour passer au champ suivant. Pour les champs nécessitant un certain formatage (tels que les numéros de téléphone ou une date de naissance), il est également préférable d'avoir un champ unique associé à des règles de mise en forme claires.

Évitez les menus déroulants

Luke Wroblewski a déclaré que les listes déroulantes devraient être le dernier recours . Les listes déroulantes sont particulièrement mauvaises pour les mobiles, car les éléments réduits rendent le processus de saisie des données plus difficile sur un petit écran: le fait de placer des options dans une liste déroulante nécessite deux tapotements.

le remplacer par des boutons radio. Ils rendront toutes les options possibles et réduiront les coûts d'interaction – les utilisateurs peuvent appuyer sur l'élément et sélectionner en une seule fois.

Utiliser des espaces réservés et des entrées masquées

L'incertitude du formatage est l'un des problèmes les plus importants de la conception de formulaires. Ce problème a une connexion directe avec l'abandon de formulaire – lorsque les utilisateurs ne sont pas certains du format dans lequel ils doivent fournir des données, ils peuvent rapidement abandonner le formulaire. Vous pouvez faire certaines choses pour clarifier le format.

Placeholder Text

Le texte d'un champ de saisie peut indiquer aux utilisateurs le contenu attendu. Le texte des espaces réservés n'est pas requis pour les champs simples tels que "Nom complet", mais il peut être extrêmement utile pour les champs nécessitant des données dans un format spécifique. Par exemple, si vous concevez une fonctionnalité de recherche pour suivre un colis, il serait bon de fournir un exemple de numéro de suivi comme espace réservé pour le champ Numéro de suivi.

Il est essentiel que votre formulaire fasse clairement la distinction entre le texte d’espace réservé et la valeur réelle entrée par l’utilisateur. En d'autres termes, le texte d'espace réservé ne doit pas ressembler à une valeur prédéfinie. Sans distinction visuelle claire, les utilisateurs peuvent penser que les champs avec des espaces réservés ont déjà des valeurs.

Masked Input

Le masquage de champ est une technique qui aide les utilisateurs à formater le texte saisi. De nombreux concepteurs confondent le masquage de champs avec le texte d’espace réservé – ce n’est pas la même chose. Contrairement aux espaces réservés, qui sont essentiellement du texte statique, les masques mettent automatiquement en forme les données fournies par l'utilisateur. Dans l'exemple ci-dessous, les parenthèses, les espaces et les tirets apparaissent automatiquement à l'écran lorsqu'un numéro de téléphone est entré.

L'entrée masquée facilite également la validation des informations par les utilisateurs. Lorsqu'un numéro de téléphone est affiché en morceaux, il est plus facile de trouver et de corriger une faute de frappe.

Fournir un clavier assorti

Les utilisateurs mobiles apprécient les applications et les sites Web qui fournissent un clavier approprié pour le terrain. Cette fonctionnalité les empêche de faire des actions supplémentaires. Par exemple, lorsque les utilisateurs doivent entrer un numéro de carte de crédit, votre application doit uniquement afficher le clavier. Il est essentiel d'implémenter la correspondance de clavier de manière cohérente dans toute l'application (tous les formulaires de votre application doivent avoir cette fonctionnalité).

Définissez les types d'entrée HTML pour afficher le clavier correct. Sept types d'entrée sont pertinents pour la conception de formulaire:

• 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 0 à 9.
• input type = "number" affiche un clavier avec des chiffres et des symboles.
• type d'entrée = "date" affiche le sélecteur de date du périphérique mobile.
• input type = "datetime" affiche le sélecteur de date et d'heure du périphérique mobile.
• input type = "month" affiche les données du périphérique mobile. sélecteur de mois et d’année

Utilisation d'un curseur pour demander une plage spécifique

De nombreux formulaires demandent aux utilisateurs de fournir une plage de valeurs (par exemple, une fourchette de prix, une plage de distances, etc.). Au lieu d'utiliser deux champs distincts, "from" et "to", utilisez un curseur pour permettre aux utilisateurs de spécifier la plage avec une interaction avec le pouce.

Expliquez clairement pourquoi vous demandez des informations sensibles

Les gens sont de plus en plus préoccupés par la confidentialité et la sécurité des informations. Lorsque les utilisateurs voient une demande d'informations qu'ils considèrent comme privée, ils peuvent penser: "Pourquoi ont-ils besoin de cela?" Si votre formulaire demande aux utilisateurs des informations sensibles, veillez à expliquer pourquoi vous en avez besoin. Vous pouvez le faire en ajoutant du texte de support sous les champs appropriés. En règle générale, le texte de l'explication ne doit pas dépasser 100 caractères.

Attention aux valeurs statiques par défaut

Contrairement aux valeurs par défaut intelligentes, calculées par le système en fonction des informations dont dispose le système sur les utilisateurs, les valeurs par défaut statiques sont des valeurs prédéfinies dans des formulaires identiques pour tous les utilisateurs. Évitez les valeurs statiques par défaut, sauf si vous pensez qu'une partie importante de vos utilisateurs (95%, par exemple) sélectionnerait ces valeurs, en particulier pour les champs obligatoires. Pourquoi? Parce que vous êtes susceptible d'introduire des erreurs – les gens scannent les formulaires rapidement et ils ne passeront pas plus de temps à analyser toutes les questions;

Protéger les données utilisateur

Jef Raskin a dit un jour: "Le système doit traiter toutes les entrées utilisateur comme sacrées." Ceci est absolument vrai pour les formulaires. C'est génial lorsque vous commencez à remplir un formulaire Web, puis actualisez accidentellement la page, mais les données restent dans les champs. Des outils tels que Garlic.js vous aident à conserver les valeurs d'un formulaire localement jusqu'à ce que le formulaire soit envoyé. De cette façon, les utilisateurs ne perdront aucune donnée précieuse s'ils ferment accidentellement l'onglet ou le navigateur.

Automatiser les actions

Si vous souhaitez que le processus de saisie des données soit le plus fluide possible, cela ne suffit pas des champs d'entrée – vous devez également faire attention à l'effort utilisateur requis pour la saisie des données. La saisie a un coût d'interaction élevé: elle est source d'erreurs et prend du temps, même avec un clavier physique. Mais en ce qui concerne les écrans mobiles, cela devient encore plus critique. Plus de frappe augmente les chances de l'utilisateur de commettre des erreurs. Efforcez-vous d'éviter la saisie inutile, car elle améliorera la satisfaction des utilisateurs et diminuera les taux d'erreurs.

Voici quelques conseils pour atteindre cet objectif:

Autocomplete

La plupart des utilisateurs remplissent automatiquement une question dans Google Barre de recherche. Google fournit aux utilisateurs une liste de suggestions relatives à ce que l'utilisateur a saisi dans le champ. Le même mécanisme peut être appliqué à la conception de formulaire. Par exemple, un formulaire peut compléter automatiquement une adresse e-mail.

Autocapitalize

L'autocapitalisation fait de la première lettre une majuscule automatiquement. Cette fonctionnalité est excellente pour les champs tels que les noms et les adresses, mais évitez-la pour les champs de mot de passe.

Correction automatique

La correction automatique modifie les mots qui semblent mal orthographiés. Désactivez cette fonctionnalité pour les champs uniques, tels que les noms, les adresses, etc.

Remplissage automatique de données personnelles

La saisie d'une adresse est souvent la partie la plus lourde de tout formulaire d'inscription en ligne. Facilitez cette tâche en utilisant la fonction de navigateur pour remplir le champ en fonction des valeurs précédemment saisies. Selon Google le remplissage automatique permet de remplir les formulaires 30% plus rapidement.

Utilisation des fonctions natives du périphérique mobile pour simplifier la saisie de données

Les périphériques mobiles modernes sont des périphériques sophistiqués dotés de capacités incroyables. Les concepteurs peuvent utiliser les fonctionnalités natives d'un périphérique (telles que la caméra ou la géolocalisation) pour rationaliser la saisie des données.

Vous trouverez ci-dessous quelques conseils sur l'utilisation des capteurs et du matériel.

Il est possible de présélectionner le pays de l'utilisateur en fonction de ses données de géolocalisation. Mais parfois, pré-remplir une adresse complète peut être problématique en raison de problèmes de précision. L'API Places Google peut aider à résoudre ce problème. Il utilise à la fois la géolocalisation et le pré-remplissage des adresses pour fournir des suggestions précises en fonction de l'emplacement exact de l'utilisateur.

À l'aide des services de localisation, il est également possible de fournir des valeurs par défaut intelligentes. Par exemple, pour un formulaire "Rechercher un vol", il est possible de pré-remplir le champ "De" avec l'aéroport le plus proche de l'utilisateur en fonction de la géolocalisation de l'utilisateur.

Autorisation biométrique

Aujourd'hui, la plupart des gens oublient les mots de passe. 82% des personnes ne peuvent pas se rappeler de leurs mots de passe et 5 à 10% des sessions exigent que les utilisateurs réinitialisent leur mot de passe. La récupération de mot de passe est un gros problème dans le commerce électronique. 75% des utilisateurs n'achèteraient pas un achat s'ils devaient tenter de récupérer leur mot de passe lors de la vérification.

L'avenir des mots de passe n'est pas un mot de passe. Même aujourd'hui, les développeurs mobiles peuvent tirer parti des technologies biométriques. Les utilisateurs ne devraient pas avoir besoin de saisir un mot de passe. ils devraient pouvoir utiliser des lecteurs biométriques pour l'authentification – se connecter par empreinte digitale ou numérisation du visage.

Camera

Si votre formulaire demande aux utilisateurs de fournir des informations de carte de crédit ou des informations à partir de leur licence de conducteur, il est possible de simplifier le processus de saisie en utilisant la caméra comme scanner. Fournissez une option pour prendre une photo de la carte et remplir tous les détails automatiquement.

Rappelez-vous que, quelle que soit la qualité de votre application, elle est indispensable pour la modification. Les utilisateurs doivent pouvoir modifier les champs quand ils le souhaitent.

Voice

Les appareils à commande vocale, tels que Apple HomePod, Google Home et Amazon Echo, empiètent activement sur le marché. Le nombre de personnes qui préfèrent utiliser la voix pour des opérations communes a considérablement augmenté. Selon ComScore, 50% de toutes les recherches seront des recherches vocales d'ici 2020 .

À mesure que les utilisateurs se sentent plus à l'aise et plus à l'aise avec les commandes vocales, ils deviendront une caractéristique attendue des interactions mobiles. L'entrée vocale présente de nombreux avantages pour les utilisateurs mobiles: elle est particulièrement utile dans les situations où les utilisateurs ne peuvent pas se concentrer sur un écran, par exemple lorsqu'ils conduisent une voiture.

méthode de saisie des données

Étiquettes de champ

Écrire des étiquettes claires et concises

L'étiquette est le texte qui indique aux utilisateurs quelles sont les données attendues dans un champ de saisie particulier. L'écriture d'étiquettes claires est l'un des meilleurs moyens de rendre un formulaire plus accessible. Les étiquettes devraient aider l'utilisateur à comprendre quelles informations sont requises d'un coup d'œil.

Évitez d'utiliser des phrases complètes pour expliquer. Une étiquette n'est pas un texte d'aide. Écrivez des étiquettes succinctes et nettes (un mot ou deux), afin que les utilisateurs puissent numériser rapidement votre formulaire.

Placer l'étiquette et la saisie rapprochées

Placez chaque étiquette près du champ de saisie, car l'œil saura qu'elles

N'utilisez pas de texte d'espace réservé disparaissant comme étiquettes

Bien que les étiquettes en ligne fassent bonne figure et permettent d'économiser de la valeur d'écran, ces inconvénients sont largement compensés par les inconvénients importants liés à la facilité d'utilisation. Lorsque les utilisateurs commencent à saisir du texte dans un champ, le texte de l'espace réservé disparaît et oblige les utilisateurs à rappeler ces informations. Bien que cela ne soit pas un problème pour les formulaires simples à deux champs, cela pourrait être un gros problème pour les formulaires comportant beaucoup de champs (par exemple, 7 à 10). Il serait difficile pour les utilisateurs de rappeler toutes les étiquettes de champ après avoir saisi des données. Sans surprise, les tests utilisateur montrent continuellement que les espaces réservés dans les champs de formulaire nuisent souvent à la facilité d'utilisation .

Grand aperçu )

Il existe une solution simple au problème de la disparition d'espaces réservés: l'étiquette flottante (ou adaptative). Une fois que l'utilisateur a tapé sur le champ avec la marque de réservation d'étiquette, l'étiquette ne disparaît pas, il se place en haut du champ et permet à l'utilisateur d'entrer ses données.

Étiquettes à alignement supérieur

Mettre des étiquettes de champs au-dessus des champs dans un formulaire améliore la façon dont les utilisateurs numérisent le formulaire. En utilisant une technologie de suivi oculaire pour cela, Google a montré que les utilisateurs avaient besoin de moins de fixations moins de temps de fixation et moins de saccades avant de soumettre un formulaire

pour les étiquettes Les étiquettes longues et les versions localisées s'intégreront plus facilement dans la mise en page. Ce dernier est particulièrement adapté aux petits écrans mobiles. Les champs de formulaire peuvent s'étendre sur toute la largeur de l'écran, ce qui les rend suffisamment grands pour afficher l'intégralité de l'entrée de l'utilisateur.

Sentence Vs. Cas de titre

Il existe deux manières générales de mettre des mots en majuscules:

• Cas de titre: mettre en majuscule chaque mot. "This Is Title Case"
• Phrase: majuscule le premier mot. "Ceci est un cas de phrase."

L'utilisation de la casse des phrases pour les étiquettes a un avantage sur la casse des titres: elle est légèrement plus facile à lire (et donc plus rapide). Alors que la différence pour les étiquettes courtes est négligeable (il n'y a pas beaucoup de différence entre "Nom complet" et "Nom complet"), pour les étiquettes plus longues, la casse des phrases est meilleure. Maintenant, vous savez à quel point il est difficile de lire un texte long dans un casier.

Évitez d'utiliser des majuscules pour les étiquettes

Le texte en majuscule, c'est-à-dire le texte en lettres majuscules, est correct la lecture (tels que les acronymes et les logos), mais évitez tous les chapeaux. Tel que mentionné par Miles Tinker dans son ouvrage Lisibilité de l'impression l'impression en majuscules ralentit considérablement la vitesse de numérisation et de lecture par rapport aux minuscules.

Grand aperçu )

Disposition

Vous savez maintenant que les utilisateurs de numérisent des pages Web plutôt que de les lire . La même chose vaut pour remplir des formulaires. C'est pourquoi les concepteurs doivent concevoir une forme facile à numériser. Une analyse efficace et efficace est essentielle pour accélérer le remplissage du formulaire.

Utiliser une structure à une colonne

Une étude de réalisée par CXL Institute a révélé que les formulaires de colonne sont plus rapides à remplir que les formulaires multi-colonnes. Dans cette étude, les participants au test ont été en mesure de remplir un formulaire d'une seule colonne en moyenne 15,4 secondes plus rapidement qu'un formulaire à colonnes multiples.

Plusieurs colonnes perturbent le moment vertical d'un utilisateur; avec plusieurs colonnes, les yeux commencent à zigzaguer. Cela augmente considérablement le nombre de fixations oculaires et, par conséquent, le délai d'achèvement. De plus, les formulaires à colonnes multiples peuvent poser des questions inutiles à l'utilisateur, comme "Où devrais-je commencer?" Et "Les questions dans la colonne de droite ont-elles une importance égale aux questions de gauche?"

, les yeux se déplacent dans une direction naturelle, de haut en bas, une ligne à la fois. Cela aide à définir un chemin clair pour l'utilisateur. Une colonne est excellente pour le mobile car les écrans sont plus longs verticalement et le défilement vertical est un mouvement naturel pour les utilisateurs mobiles .

Il existe quelques exceptions à cette règle. Il est possible de placer des champs courts et liés de manière logique sur la même ligne (par exemple, pour la ville et l'indicatif régional).

Créez un flux avec vos questions

La manière dont vous posez les questions est également importante. Les questions doivent être posées logiquement du point de vue de l'utilisateur, et non en fonction de la logique de l'application ou de la base de données, car cela aidera à créer un sentiment de conversation avec l'utilisateur. Par exemple, si vous créez un formulaire de commande et que vous demandez des détails tels que le nom complet, le numéro de téléphone et la carte de crédit, la première question doit concerner le nom complet. Changer l'ordre (par exemple, en commençant par un numéro de téléphone au lieu d'un nom) entraîne une gêne. Dans les conversations du monde réel, il serait inhabituel de demander le numéro de téléphone de quelqu'un avant de lui demander son nom.

Des questions approfondies à la fin

Quand il s'agit de concevoir un flux de questions à poser, réfléchissez sur la priorisation. Suivez la règle "facile avant difficile" et posez des questions approfondies ou personnelles en dernier. Cela facilite les utilisateurs dans le processus; ils seront plus susceptibles de répondre à des questions complexes et plus intrusives une fois qu'ils auront établi un rapport. Cela a une base scientifique: Le principe de cohérence de Robert Cialdini stipule que lorsque quelqu'un fait un petit geste ou fait un pas vers quelque chose, il se sent plus obligé de finir.

Group Related Fields Together

Les principes de la psychologie de la Gestalt, le principe de la proximité, stipulent que les éléments connexes doivent être proches les uns des autres. Ce principe peut être appliqué à l'ordre des questions dans un formulaire. Plus les questions sont proches, plus elles doivent être proches les unes des autres.

Les concepteurs peuvent regrouper les champs associés en sections. Si votre formulaire comporte plus de six questions, regroupez les questions connexes dans des sections logiques. N'oubliez pas de fournir une bonne quantité d'espace blanc entre les sections pour les distinguer visuellement.

Une forme plus longue semble plus simple

Comment concevez-vous un formulaire qui pose beaucoup de questions aux utilisateurs? Bien sûr, vous pouvez poser toutes les questions sur un seul écran. Mais cela empêche votre taux d'achèvement. Si les utilisateurs ne sont pas suffisamment motivés pour remplir un formulaire, la complexité du formulaire risque de les effrayer. La première impression joue un rôle essentiel. Généralement, plus un formulaire semble long ou compliqué, moins les utilisateurs seront enclins à remplir les espaces.

Réduisez le nombre de champs visibles en même temps. Cela crée la perception que la forme est plus courte qu'elle ne l'est réellement.

Il existe deux techniques pour ce faire.

Divulgation progressive

La divulgation progressive consiste à donner aux utilisateurs la bonne chose au bon moment. Le but est de trouver les bons éléments à afficher sur le petit écran au bon moment:

• Initialement, ne montrer aux utilisateurs que quelques-unes des options les plus importantes.
• Révélez des parties de votre formulaire lorsque l'utilisateur interagit avec lui.

Chunking

Chunking entails breaking a long form into steps. It’s possible to increase the completion rate by splitting a form into a few steps. Chunking can also help users process, understand and remember information. When designing multi-step forms, always inform users of their progress with a completeness meter.

Designers can use either a progress tracker (as shown in the example above) or a “Step # out of #” indicator both to tell how many steps there are total and to show how far along the user is at the moment. The latter approach could be great for mobile forms because step indication doesn’t take up much space.

Action Buttons

A button is an interactive element that direct users to take an action.

Make Action Buttons Descriptive

A button’s label should explain what the button does; users should be able to understand what happens after a tap just by looking at the button. Avoid generic labels such as “Submit” and “Send”, using instead labels that describe the action.

Don’t Use Clear Or Reset Buttons

Clear or reset buttons allow users to erase their data in a form. These buttons almost never help users and often hurt them. The risk of deleting all of the information a user has entered outweighs the small benefit of having to start again. If a user fills in a form and accidentally hits the wrong button, there’s a good chance they won’t start over.

Use Different Styles For Primary And Secondary Buttons

Avoid secondary actions if possible. But if your form has two calls to action (for example, an e-commerce form that has “Apply discount” and “Submit order”) buttons, ensure a clear visual distinction between the primary and secondary actions. Visually prioritize the primary action by adding more visual weight to the button. This will prevent users from tapping on the wrong button.

Design Finger-Friendly Touch Targets

Tiny touch targets create a horrible user experience because they make it challenging for users to interact with interactive objects. It’s vital to design finger-friendly touch targets: bigger input fields and buttons.

The image below shows that the width of the average adult finger is about 11 mm.

According to material design guidelinestouch targets should be at least 48 × 48 DP. A touch target of this size results in a physical size of about 9 mm, regardless of screen size. It might be appropriate to use larger touch targets to accommodate a wider spectrum of users.

Not only is target size important, but sufficient space between touch targets matters, too. The main reason to maintain a safe distance between touch targets is to prevent users from touching the wrong button and invoking the wrong action. The distance between buttons becomes extremely important when binary choices such as “Agree” and “Disagree” are located right next to each other. Material design guidelines recommend separating touch targets with 8 DP of space or more, which will create balanced information density and usability.

Disable Buttons After Tap

Forms actions commonly require some time to be processed. For example, data calculation might be required after a submission. It’s essential not only to provide feedback when an action is in progress, but also to disable the submit button to prevent users from accidentally tapping the button again. This is especially important for e-commerce websites and apps. By disabling the button, you not only prevent duplicate submissions, which can happen by accident, but you also provide a valuable acknowledgment to users (users will know that the system has received their submission).

Assistance And Support

Provide Success State

Upon successful completion of a form, it’s critical to notify users about that. It’s possible to provide this information in the context of an existing form (for example, showing a green checkmark above the refreshed form) or to direct users to a new page that communicates that their submission has been successful.

Errors And Validation

Users will make mistakes. It’s inevitable. It’s essential to design a user interface that supports users in those moments of failures.

While the topic of errors and validation deserves its own article, it’s still worth mentioning a few things that should be done to improve the user experience of mobile forms.

Use Input Constraints for Each Field

Prevention is better than a cure. If you’re a seasoned designer, you should be familiar with the most common cases that can lead to an error state (error-prone conditions). For example, it’s usually hard to correctly fill out a form on the first attempt, or to properly sync data when the mobile device has a poor network connection. Take these cases into account to minimize the possibility of errors. In other words, it’s better to prevent users from making errors in the first place by utilizing constraints and offering suggestions.

For instance, if you design a form that allows people to search for a hotel reservation, you should prevent users from selecting check-in dates that are in the past. As shown in the Booking.com example below, you can simply use a date selector that allows users only to choose today’s date or a date in the future. Such a selector would force users to pick a date range that fits.

Don’t Make Data Validation Rules Too Strict

While there might be cases where it’s essential to use strict validation rules, in most cases, strict validation is a sign of lazy programming. Showing errors on the screen when the user provides data in a slightly different format than expected creates unnecessary friction. And this would have a negative impact on conversions.

It’s very common for a few variations of an answer to a question to be possible; for example, when a form asks users to provide information about their state, and a user responds by typing their state’s abbreviation instead of the full name (for example, CA instead of California). The form should accept both formats, and it’s the developer job to convert the data into a consistent format.

Clear Error Message

When you write error messages, focus on minimizing the frustration users feel when they face a problem in interacting with a form. Here are a few rules on writing effective error messages:

• Never blame the user.
  The way you deliver an error message can have a tremendous impact on how users perceive it. An error message like, “You’ve entered a wrong number” puts all of the blame on the user; as a result, the user might get frustrated and abandon the app. Write copy that sounds neutral or positive. A neutral message sounds like, “That number is incorrect.”
• Avoid vague or general error messages.
  Messages like “Something went wrong. Please, try again later” don’t say much to users. Users will wonder what exactly went wrong. Always try to explain the root cause of a problem. Make sure users know how to fix errors.
• Make error messages human-readable.
  Error messages like “User input error: 0x100999” are cryptic and scary. Write like a human, not like a robot. Use human language, and explain what exactly the user or system did wrong, and what exactly the user should do to fix the problem.

Display Errors Inline

When it comes to displaying error messages, designers opt for one of two locations: at the top of the form or inline. The first option can make for a bad experience. Javier Bargas-Avila and Glenn Oberholzer conducted research on online form validation and discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. Users need to spend extra time matching error messages with the fields that require attention.

It’s much better to position error messages inline. First, this placement corresponds with the user’s natural top-to-bottom reading flow. Secondly, the errors will appear in the context of the user’s input.

Use Dynamic Validation

The time at which you choose to display an error message is vital. Seeing an error message only after pressing the submit button might frustrate users. Don’t wait until users finish the form; provide feedback as data is being entered.

Use inline validation with real-time feedback. This validation instantly tells people whether the information they’ve typed is compatible with the form’s requirements. In 2009, Luke Wroblewski tested inline validation against post-submission validation and found the following results for the inline version:

• 22% increase in success rate,
• 22% decrease in errors made,
• 31% increase in satisfaction rating,
• 42% decrease in completion times,
• 47% decrease in the number of eye fixations.

But inline validation should be implemented carefully:

• Avoid showing inline validation on focus.
  In this case, as soon as the user taps a field, they see an error message. The error appears even when the field is completely empty. When an error message is shown on focus, it might look like the form is yelling at the user before they’ve even started filling it out.
• Don’t validate after each character typed.
  This approach not only increases the number of unnecessary validation attempts, but it also frustrates users (because users will likely see error messages before they have completed the field). Ideally, inline validation messages should appear around 500 to 1000 milliseconds after the user has stopped typing or after they’ve moved to the next field. This rule has a few exceptions: It’s helpful to validate inline as the user is typing when creating a password (to check whether the password meets complexity requirements), when creating a user name (to check whether a name is available) and when typing a message with a character limit.

Accessibility

Users of all abilities should be able to access and enjoy digital products. Designers should strive to incorporate accessibility needs as much as they can when building a product. Here are a few things you can do to make your forms more accessible.

Ensure The Form Has Proper Contrast

Your users will likely interact with your form outdoors. Ensure that it is easy to use both in sun glare and in low-light environments. Check the contrast ratio of fields and labels in your form. The W3C recommends the following contrast ratios for body text:

• Small text should have a contrast ratio of at least 4.5:1 against its background.
• Large text (at 14-point bold, 18-point regular and up) should have a contrast ratio of at least 3:1 against its background.

Measuring color contrast can seem overwhelming. Fortunately, some tools make the process simple. One of them is Web AIM Color Contrast Checkerwhich helps designers to measure contrast levels.

Do Not Rely On Color Alone To Communicate Status

Color blindness (or color vision deficiency) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. While there are many types of color blindness, the most common two are protanomaly, or reduced sensitivity to red light, and deuteranomaly, or reduced sensitivity to green light. When displaying validation errors or success messages, don’t rely on color alone to communicate the status (i.e. by making input fields green or red). As the W3C guidelines state, color shouldn’t be used as the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element. Designers should use color to highlight or complement what is already visible. Support colorblind people by providing additional visual cues that help them understand the user interface.

Allow Users To Control Font Size

Allow users to increase font size to improve readability. Mobile devices and browsers include features to enable users to adjust the font size system-wide. Also, make sure that your form has allotted enough space for large font sizes.

Test Your Design Decisions

All points mentioned above can be considered as industry best practices. But just because something is called a “best practice” doesn’t mean it is always the optimal solution for your form. Apps and websites largely depend on the context in which they are used. Thus, it’s always essential to test your design decisions; make sure that the process of filling out a form is smooth, that the flow is not disrupted and that users can solve any problems they face along the way. Conduct usability testing sessions on a regular basis, collect all valuable data about user interactions, and learn from it.

Conclusion

Users can be hesitant to fill out forms. So, our goal as designers is to make the process of filling out a form as easy as possible. When designing a form, strive to create fast and frictionless interactions. Sometimes a minor change — such as properly writing an error message — can significantly increase the form’s usability.

his article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design processas it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behanceand also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

(al, yk, il)