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.
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.
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.
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.
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.
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.
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.
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.
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.
