6-mistakes-in-website-form-design-you-should-never-make

6 erreurs sous forme de site web design que vous ne devriez jamais faire

UI (User Interface) et UX (User Experience) ont un rôle important dans la conversion web design convivial. L’interface utilisateur rend votre site magnifique et UX se concentre sur la facilité d’utilisation et la facilité du site. Si l’un de ces deux éléments sont manquants ou non équilibrée, le résultat est des clients rebondissant. sous forme de site Web design est qu’une partie de la conception de sites Web qui assure la génération de prospects transparente et la collecte d’informations avec satisfaction correcte de l’utilisateur sur un site Web. Dans ce blog, nous concentrerons principalement sur UX comme interface utilisateur est quelque chose qui est très subjective et sera défini par les lignes directrices de l’image de marque de votre entreprise ou votre choix de couleurs, bannières et polices.

Wikipedia dit:

« Conception de l’ expérience utilisateur (UX, UXD, DFT ou XD) est le processus d’amélioration de lasatisfaction des utilisateurs avec un produit en améliorant la facilité d’ utilisation, l’ accessibilité et leplaisir fourni dans l’interaction avec le produit . »

Nous utilisons différentes formes sur nos sites Web sur presque toutes les parties. De formulaires de commentaires à la page Commander tout a son but, et si elles ne sont pas conçus en fonction de ce qu’ils sont destinés, ils ne parviendront pas à leur objectif.

Dans ce post, je vais vous expliquer 6 ces erreurs dans une forme de conception de site Web que vous ne devriez jamais commettre si vous voulez éviter le dos de rebond, et pires expériences des utilisateurs sur votre site Web.

1. Demande trop d’informations de l’utilisateur

« 40% des personnes abandonnent un site Web qui prend plus de 3 secondes pour charger. » –KISSmetrics. Ceci est lorsque le site a ralenti de 1 sec, imaginez ce que serait la réaction si vos déchets de site web beaucoup plus de temps que simplement en demandant des détails inutiles pour remplir les formulaires.

Alors, ne perdez pas leur temps et votre conversion en demandant des informations « pas important ». S’il vous plaît noter qu’il ya une différence entre les informations « inutiles » et l’information « pas important ».

Des informations comme « ethnique » ou « Lieu de naissance » de la personne peut être considérée comme nécessaire pour un site de commerce électronique, mais il pourrait être important pour le site Web d’un parti politique. Donc, cela est également discutable et subjectif, mais je crois que vous avez eu l’idée.

champs « Pas si importants » peuvent être:

  • Email ID supplémentaire
  • Numéro de téléphone supplémentaire
  • Date de naissance
  • Numéro de fax
  • Question de sécurité et réponse
  • Numéro de sécurité sociale, etc.

Même si vous avez besoin de ces informations, il est pas nécessaire de demander un seul coup, vous pouvez toujours donner une option à l’utilisateur de mettre à jour son / son profil. Pensez comme Linkedin ou Facebook, ils ne demandent pas tout en une seule fois, au lieu ils ont d’abord vous faire signer avec aussi peu que 3-5 champs et vous donnent une option pour mettre à jour votre profil plus tard.

Il est tout au sujet de la présentation, de sorte que vous devriez demander que les détails les plus importants que vous avez besoin comme: Si vous utilisez le formulaire de commentaires, puis poser des questions sur leurs points de vue et commentaires avant de demander leur nom ou l’identifiant e-mail. De même, si elle est une forme de paiement, et vous avez déjà certaines informations sur l’utilisateur, ne demandez pas pour ceux qui encore une fois, au lieu de les faire pré-remplies sur le formulaire. Par exemple, vous pouvez pré-remplir les informations contenues dans l’adresse de facturation de pour remplir automatiquement le formulaire d’adresse de livraison si les deux adresses sont identiques.

expédition-facturation des informations
Information pré-population d’une forme à l’autre peut gagner du temps et d’efforts des utilisateurs

2. étiquette ou Ambigu non sensibles au positionnement

Les étiquettes sont utilisées dans les formes de site Web pour le rendre facile pour l’utilisateur de remplir les informations requises. Donc, faire en sorte que les étiquettes sont placées à une position correcte qui ne confondez pas l’utilisateur sur ce qu’il faut remplir en elle. Un bon alignement de l’étiquette est essentiellement nécessaire lorsque vous concevez un formulaire réactif qui sert à différentes tailles d’écran. Assurez-vous que les étiquettes restent alignés correctement sur toutes les tailles d’écran la forme est en cours d’ouverture.

Formulaire de contact mobile
Formulaire de contact mobile
écran-tailles-choix recommandé
La plupart des formes de site Web utilisent les mêmes emplacements d’étiquettes sur toutes les tailles d’écran qui n’est pas un choix recommandé

Les utilisateurs sur le zoom de l’utilisation mobile pour voir clairement les étiquettes sur les formulaires afin qu’ils remplissent les informations correctes. Cependant, comme le montre l’image ci-dessus si vous gardez le même alignement sur les versions de bureau et mobiles de la forme, il cachera toutes les étiquettes en cliquant sur le formulaire en mode zoom. Il forcera l’utilisateur à effectuer un zoom arrière la forme à chaque fois qu’il se déplace à l’entrée suivante.

Une meilleure option pour la poignée serait d’utiliser deux alignements différents sur la version bureau et mobile du formulaire. Faire les étiquettes haut alignées sur les versions mobiles et le garder aligné à droite sur le bureau.

3. Remplacement des étiquettes avec placeholders-

Avec l’attribut HTML 5, des espaces réservés dans le texte sont un ajout précieux. Ils sont effectivement utilisés pour fournir une brève indication sur une valeur attendue dans le domaine.

hint-about-valeur attendue en forme de champ
Placeholders fournir une brève indication sur les valeurs attendues dans le champ de formulaire

Généralement, un espace réservé reste visible jusqu’à ce que l’utilisateur clique sur le terrain. Dès que l’utilisateur clique sur le terrain pour taper quelque chose, l’espace réservé disparaît.L’utilisation de caractères génériques sous forme de conception de site Web est très confondue avec celle des étiquettes. Beaucoup de designers utilisent ces espaces réservés à la place d’étiquettes pour décrire les champs d’entrée pour obtenir un espoir de conception propre. Ceci est une grande erreur que compromis avec l’expérience utilisateur.

Prenons une situation lorsque l’utilisateur remplit un formulaire long comme un formulaire de paiement. Après avoir rempli le formulaire, il pourrait vouloir examiner les détails avant de pouvoir soumettre le formulaire. Maintenant, s’il n’y a pas d’étiquette sous la forme, il va simplement se confondre sur les détails qu’il a rempli.

placeholders
L’utilisation des espaces réservés à la place des étiquettes confondra vos clients en particulier dans les formes longues

Alors, utilisez toujours une étiquette. Ne pas utiliser les étiquettes peut être un économiseur d’espace, mais vous surprendre de savoir comment les gens oublient facilement ce que l’étiquette était une fois qu’ils remplissent les informations sur le terrain.

4. À l’aide d’espacement insuffisant et la mise en page déformée

Une autre grande erreur que nous faisons sous forme de conception de site Web est en plaçant trop d’éléments sur une seule page. D’autres sont le nombre d’éléments sur une seule page est plus la concurrence entre eux pour attirer l’attention.

La solution est de laisser un peu d’espace de respiration entre les éléments en gardant des espaces blancs. Un flux approprié pour vos utilisateurs ne seront fournis que lorsque vous conservez un espacement suffisant autour des champs et des sections différentes.

Cette forme de paiement d’une seule page montre comment les différentes sections peuvent être séparés, même s’il y a trop d’éléments sur une seule page. Le formulaire utilise des étiquettes de section pour séparer les différentes sections comme Options de connexion, adresse de facturation, Confirmer la commande, Méthode d’expédition et mode de paiement. De plus, la mise en page trois colonnes rend la forme encore plus propre.

-éviter-ségrégation désencombrer
Différentes sections se séparer d’éviter d’encombrer entre les différentes sections

5. messages d’erreur aléatoire et d’entrée de validation

Tout en remplissant les formulaires du site, il y a certaines chances que les utilisateurs commettre des erreurs en raison de laquelle la forme ne serait pas soumis. Des erreurs peuvent survenir en manquant une entrée, ou en remplissant une information incorrecte, etc. Pour faire face à ce site, les concepteurs utilisent des validations d’entrée qui affiche le message d’erreur (s) tout en soumettant le formulaire. Ils utilisent des validations côté serveur qui attend généralement la réponse de vérifier les erreurs sous la forme du serveur. Ceci est une plus grande erreur qui peut même empêcher l’utilisateur quand ils voient un message d’erreur après avoir soumis le formulaire.

Au lieu de cela, vous pouvez utiliser la validation en ligne côté utilisateur qui indique sur place si l’utilisateur remplit une entrée incorrecte dans un champ. Ce faisant, les utilisateurs ne manqueront pas s’ils sont entrés dans quelque chose de mal dans un champ.

Inline-validation
validation en ligne pour vérifier et montrer les erreurs sur place empêchent la frustration soumission du formulaire de poste

En outre, ne pas utiliser les déclarations confuses dans les messages de validation. Il suffit d’expliquer pourquoi l’entrée est erroné en décrivant comment ressemblerait l’entrée correcte.

6. A l’aide Captcha qui ne sont pas conçus pour l’homme

Captchas sont utilisés par les sites Web pour empêcher les attaques de spam en distinguant un bot de l’homme. Ces captchas sont supposés présenter un défi qui serait facile pour les humains alors que les robots ne peuvent pas passer. Pour la prévention des spams, parfois, les concepteurs sont tellement désespérés qu’ils intègrent les captchas qui sont difficiles même pour les humains.

Eviter les SPAM
Captcha qui empêchent le spam, mais frustrer les utilisateurs humains

Je comprends la prévention du spam est important, mais captcha peut être déroutant et difficile pour les utilisateurs de les décoder. Vous pouvez utiliser une solution de rechange de ce qu’on appelle Google re-Captcha, qui est une version plus avancée et simple. Le nouveau Google re-Captcha juste demande simplement à l’utilisateur de cliquer sur une case à cocher et la vérification se fait sans entrer difficile de voir le message texte.

Google re-Captcha
Google Re-Captcha est relativement plus convivial malgré il est difficile sur les robots collecteurs

Enfin ,

amélioration de l’expérience utilisateur est un processus continu qui ne peut être réalisé avec des mises à jour régulières en utilisant les meilleures méthodes disponibles. J’espère faisant état de ces erreurs de conception vous aidera à réaliser que l’amélioration de ne pas commettre ces erreurs sur l’une des formes que vous utilisez sur votre site Web.

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *