Bonjour, Habr! Je vous présente la traduction de l'article "
10 conseils pour concevoir des formes parfaites ".
Les formulaires jouent le rôle d'un portail entre l'utilisateur et le système et sont souvent la base de la page. L'autorisation, l'enregistrement, la mise à jour du statut, la saisie des données de paiement ou l'adresse de livraison sont contrôlés par des formulaires. Pour les boutiques en ligne, des formulaires bien conçus jouent un rôle important. D'après ma propre expérience, un bon design double les ventes en ligne.
Comme les formulaires remplissent des fonctions importantes pour l'interface utilisateur, il existe des règles pour leur conception.
1. Commencez par saisir des données
Commencez par l'élément le plus simple - un champ de texte. C'est le composant le plus courant de nombreuses formes, donc si vous le faites correctement, vous êtes à mi-chemin.
Le formulaire comporte trois éléments principaux: un champ de texte, un titre et un message d'erreur. Quelle que soit la conception que vous choisissez de créer, assurez-vous que l'utilisateur sait quelles informations sont requises et, en cas d'erreur, comment vous en débarrasser.
Les titres doivent être en haut.
Les tendances naissent et meurent. Il est maintenant à la mode de placer l'espace réservé comme en-tête. Son utilisation, bien qu'elle ne soit pas erronée, soulève quelques problèmes UX (note: "expérience utilisateur"). Le fait est que lorsque le champ est rempli, l'utilisateur ne voit pas l'en-tête.
Les titres doivent toujours être vus. Par conséquent, ils sont placés sur le dessus.
Pourquoi au-dessus et non à gauche du champ de saisie des données?
Lorsque l'en-tête se trouve à gauche du champ de texte, sur l'écran du téléphone, les éléments se déplacent les uns par rapport aux autres. Pensez d'abord à la façon dont tout apparaîtra sur l'écran du téléphone.
Aidez l'utilisateur en spécifiant un exemple dans l'espace réservé.
Un autre argument en faveur du placement des en-têtes au-dessus du champ de saisie des données est que l'utilisateur lit les informations sur une ligne verticale, car selon la recherche, cela est plus rapide que de déplacer la vue de la colonne de gauche vers la droite.
2. Message d'erreur et avertissement
Pour un champ de texte standard, des messages d'erreur sont nécessaires.
Voici 3 conseils pour les concevoir:
L'erreur se produit à la fois en raison du client et du serveur.
Côté client, des problèmes sont détectés lorsque le champ requis n'est pas rempli ou que l'adresse e-mail n'est pas saisie correctement:
- Le serveur vérifie si l'e-mail donné existe;
- L'utilisateur est averti d'une erreur client avant d'envoyer le formulaire. Des erreurs sont nécessaires pour empêcher l'envoi d'informations incorrectes par l'utilisateur.
Vérifier les messages d'erreur
Fournissez des informations sur le champ de l'erreur. Pour des raisons de sécurité, certains développeurs n'indiquent pas d'erreur dans l'e-mail ou le mot de passe lors de l'autorisation, ce qui est tout à fait normal. Mais lorsque l'utilisateur s'abonne à la newsletter ou saisit son adresse lors de l'achat, indiquez-lui quel champ est mal renseigné et pourquoi.
Chaque fois que vous remplissez un champ de texte, vérifiez à quoi ressemblera l'erreur avant et après avoir cliqué sur le bouton d'envoi.
Utiliser des avertissements
Informez l'utilisateur si le champ requiert certains critères, par exemple si le mot de passe doit contenir un certain nombre de caractères ou combiner des chiffres et des lettres.
Indiquez la force du mot de passe, si l'e-mail est enregistré sur le site ou si la connexion est occupée.
3. Utilisez des formes assorties
Visuellement, le formulaire semble plus concis si des combinaisons sont utilisées. Considérez comment l'utilisateur utilisera le formulaire à partir du téléphone.
Si tous les champs sont du texte, l'utilisateur devra constamment ouvrir le clavier.
Pour une modification, invitez l'utilisateur à passer d'un champ de texte à une liste déroulante (remarque: «listes déroulantes») ou à un bouton radio et vice versa.
Réfléchissez à la façon dont l'utilisateur tient le téléphone et comment éliminer les désagréments causés par une combinaison des mêmes champs pour la saisie des données.
4. Boutons radio, listes déroulantes et cases à cocher
Il y a parfois de la confusion lors du choix du bouton radio, du menu déroulant et de la case à cocher.
Radiobutton est idéal pour fournir un petit nombre de réponses possibles. Choisissez une réponse possible à l'avance ou sautez ce champ.
Radiobutton est la meilleure solution lorsque vous ne pouvez choisir qu'une seule option.
Lorsque plus d'éléments sont nécessaires, une liste déroulante sera une option plus appropriée (en pratique - plus de 5-6 réponses). Vous pouvez également sélectionner l'élément par défaut ou définir l'espace réservé «Sélectionner un élément».
La case à cocher est le meilleur choix lorsque vous devez remplir un seul champ (par exemple, conditions et conditions), ou lorsque plusieurs réponses sont fournies. Si vous souhaitez choisir les mailings publicitaires à envoyer à l'utilisateur, la case à cocher vous permettra de faire plus d'un choix.
Utiliser la case à cocher au lieu du bouton radio ne devrait pas vous limiter dans vos décisions de conception d'interface utilisateur.
En tant que concepteur, vous avez suffisamment de liberté pour choisir la façon dont les éléments de l'interface utilisateur (remarque: «interface utilisateur») seront affichés à l'écran. Même si vous souhaitez modifier la case à cocher pour qu'elle soit plus intéressante, cela ne devrait pas affecter la perception de l'utilisateur.
Au lieu d'écrire du texte devant de petits cercles, vous pouvez créer des images ou des icônes pour la sélection.
5. Si possible, excluez les champs facultatifs
Si l'objectif de l'entreprise est de vendre un produit, votre objectif en tant que concepteur est d'éliminer autant d'inconvénients que possible entre l'utilisateur et le système.
La suppression des champs inutiles permettra à l'utilisateur de faire moins d'efforts.
Lors de l'application, il est important de connaître les différents types de modes de paiement et de livraison.
Si le service commercial souhaite connaître les préférences des clients, vous pouvez le faire avec un e-mail de confirmation.
Recherchez toujours des moyens d'utiliser un minimum de champs visibles.
Si vous souhaitez optimiser votre boutique en ligne, minimisez le nombre de champs pour l'adresse de livraison et le paiement.
Si vous créez une interface pour réserver des billets d'avion, montrez à l'utilisateur le plus petit nombre de champs nécessaires pour voir les vols disponibles.
Ensuite, vous pouvez offrir plus de conditions: le nombre de sacs, etc.
6. Utilisez la saisie semi-automatique pour les formulaires volumineux
Selon le nom de la rue, le remplissage de la barre d'adresse peut prendre beaucoup de temps, surtout depuis le téléphone. Écrire correctement l'adresse peut être encore plus difficile.
Pensez à utiliser GoogleMapsAPI pour que les noms de rue se remplissent automatiquement. Cela signifie que l'utilisateur n'a qu'à saisir quelques caractères et sélectionner la rue souhaitée dans la liste proposée. Vous pouvez également remplir automatiquement le code postal en fonction du nom de la rue, mais nous en discuterons plus tard.
7. Utilisez la logique conditionnelle
Utilisez la logique pour introduire des informations pour l'utilisateur pour lui faciliter la vie.
- Si le pays de l'utilisateur est connu, le dessin peut contenir des champs supplémentaires («état» si vous êtes aux USA, «comté» en Irlande, etc.)
- Utilisez le code postal pour saisir le nom d'une ville, d'un état ou d'une province
- Si vous calculez le pays de l'utilisateur par adresse IP, est-il possible d'insérer le code du pays dans le champ de saisie du téléphone?
Si vous souhaitez remplir certains champs pour l'utilisateur, donnez-lui toujours la possibilité de saisir lui-même des informations. Il est possible que vous vous trompiez dans quelque chose.
Par exemple, vous utilisez GoogleMapsAPI pour trouver une rue en Allemagne. Connaissant le nom de la rue, vous pouvez obtenir l'indicatif régional. Cependant, certaines rues en Allemagne sont assez grandes, elles couvrent donc des codes différents, de sorte que les informations peuvent être incorrectes dans le cas des rues frontalières. Donnez toujours à l'utilisateur la possibilité de saisir des données si nécessaire.
L'utilisation de la logique conditionnelle pour tous les pays du monde nécessitera trop de travail, vous devez donc être conscient de la signification de vos efforts. Parcourez les pays d'où proviennent le plus souvent les commandes et commencez par les optimiser. Si cela conduit à des revenus plus élevés, faites de même avec le reste des pays.
8. Utilisez l'espace réservé correctement
Nous avons précédemment expliqué que l'espace réservé n'est pas toujours utilisé, car il disparaît lors de la saisie des informations. Mais nous n'avons pas envisagé d'autres façons de l'utiliser qui pourraient aider l'utilisateur.
L'espace réservé est une excellente occasion de montrer à l'utilisateur comment saisir des informations. Un bon exemple est d'entrer un téléphone. L'utilisateur doit-il entrer un code de pays? Ou le code de la ville?
Lorsque vous avez besoin d'un numéro de téléphone ou de carte dans un format spécifique, informez-en l'utilisateur en fournissant un exemple de remplissage de l'espace réservé. C'est un excellent moyen de corriger les erreurs en indiquant simplement les informations nécessaires: code de pays, etc.
9. Signalez les prochaines étapes.
Si après avoir rempli un autre formulaire de saisie, informez l'utilisateur.
Au lieu de «Suivant» ou «Payer», vous pouvez écrire «Vérifier la commande» ou «Paiement PayPal».
Ajoutez des messages indiquant les étapes suivantes après avoir cliqué sur le bouton. Le processus de commande sera-t-il terminé ou l'utilisateur aura-t-il le temps de tout vérifier? Va-t-il payer?
Cherchez toujours des moyens de réconforter l'utilisateur, surtout s'il est connecté à son compte bancaire.
Je suis ennuyé chaque fois que j'achète sur Amazon parce que je ne reçois pas toutes les informations, y compris les frais d'expédition, jusqu'à la dernière étape. Soyez honnête avec votre utilisateur. Gagnez en crédibilité en fournissant les informations nécessaires à chaque étape du remplissage, expliquez clairement à quoi vous attendre avec une utilisation future.
10. Continuez à chercher des moyens d'optimiser
Une fois que vous avez lancé un nouveau formulaire brillant, continuez de l'analyser. Si vous constatez que de nombreux utilisateurs quittent le site, découvrez la raison. Menez une enquête pour découvrir pourquoi les utilisateurs sont mal à l'aise, puis essayez de résoudre ce problème. Pour le designer, le travail n'est jamais "complètement terminé".
Conclusion
Parfois, la conception des formulaires n'est pas si intéressante, mais s'ils sont bien faits, ils peuvent changer la perception du site ou de l'application par l'utilisateur. Concevez soigneusement les formulaires pour faciliter la tâche de l'utilisateur. Donner clairement des instructions supplémentaires, fournir des conseils avec des alertes et des espaces réservés, et suggérer la saisie semi-automatique afin que les utilisateurs ne tapent pas trop.