Réflexions sur le webdesign, les nouvelles technologies, la vie ...

Formulaire d’inscription : les écueils à éviter

Suite à un travail sur une optimisation de page formulaire, j’ai décidé de regrouper une petite liste de choses qui peuvent nuire aux formulaires. Les pages d’inscription pour valider son panier sont les plus dangereuses, car un formulaire trop long, des champs mal commentés, et voilà que l’internaute s’enfuit et la vente est perdue, ceci étant confirmé par les statistiques.

Ce qu’il faut avoir en tête :

- Donner des informations personnelles fait peur.
- Même si pour créer un compte, les informations demandées sont succinctes, cela demande un effort à l’internaute.
- Les formulaires sont souvent ni clair ni ergonomique, et introduisent un sentiment de pénibilité.
- L’internaute ne pardonnera pas des erreurs techniques ou des bugs sur un site e-commerce.

En fonction de ces contraintes, il faut alors créer un formulaire beau, ergonomique, et qui fera passer l’internaute vers la page de paiement sans encombre.

Ergonomie :

- Votre formulaire doit être clair et aérer.
- Respecter des espaces suffisants entre les champs.
- Les champs doivent être suffisamment grands pour faciliter le clic et le remplissage.
- La taille de la Police des champs doit être très lisible (14px minimum).
- La longueur du champ doit être en rapport avec son contenu, par exemple le champ Code Postal doit contenir que 5 caractères et sa taille doit être en rapport. Au contraire d’un champ Adresse qui doit être très long, prévoir aussi un champ Complément d’adresse.
- Si possible, supprimer les éléments qui n’ont pas lieu d’être sur cette page et qui peuvent perturber, navigation, bannières publicitaires, images animées, etc.

Informations :

- Aider le remplissage des champs avec des infos bulles, par exemple, au survol de pictos : (?).
- Indiquer clairement les champs obligatoires, s’ils ne sont pas obligatoires pas la peine de les mettre, vous gagnerez en place et en clarté.
- Bien choisir vos titres de champs, ne laisser pas de place au doute, Ville pour ville et non pas commune.
- Donner des exemples de formatages, par exemple pour le numéro de téléphone, en dessous du champ ou à côté (06.00.00.00.00 par ex).

Gestion des erreurs :

On trouve de tout sur le net pour la gestion des erreurs, le plus simple est pourtant le mieux.
- Indiquer en haut de la page, de manière ordonné, toutes les erreurs (Toutes et non pas une à une). En rouge et en GROS sur fond visible (même si c’est moche).
- Mettre l’internaute sur la piste en indiquant comment corriger ses erreurs.
- Dans le formulaire, indiquer les champs à modifier en les encadrants de rouge (border de 2 à 4px par ex), éviter les astérisques que personne ne remarque.
- Indiquer dans le formulaire, sous les champs incriminés, comment corriger les erreurs.
- Proposer un service en ligne, par Chat ou hotline téléphonique, afin d’aider les internautes en difficulté.
- Si vous pouvez introduire de l’Ajax, corriger en temps réel les erreurs de remplissage en indiquant pendant la saisie, les erreurs commises par l’internaute.

L’Optin (option d’adhésion) :

Il faut le placer en bas de formulaire, bien visible, et expliquer les avantages de s’abonner pour recevoir des offres commerciales. Vous pouvez le cocher par défaut, mais le bénéfice n’est pas prouvé.

Un bon formulaire :

Il n’est pas forcément long, il faut surtout que l’internaute puisse le remplir avec facilité et sans impression de longueur.
Il n’y a pas de règles, ni de clics maximum, mais plutôt l’optimisation du processus pour faciliter la tâche de l’internaute.

Sérif VS Sans Sérif, que fait la Police

1247424432_preferences-desktop-fontRécemment, j’ai vu un blog changé toute sa police Arial en Georgia. Figure de style ou juste suiveur de tendance, je pense que le débat est un peu plus graphique. Pour ma part, je pense que les polices sérif sont excellentes dans un contexte de TITRE. Dans les paragraphes, quand le contenu du site est clairement axé magasine, ou pour le site d’un journal, bref quand la relation avec la presse est évidente.

Les polices de caractères avec sérif se remarquent grâce à leur base plus marquée, renforcée par les « pieds » des caractères. L’œil peut donc se déplacer horizontalement.

1] Combiner les polices de caractères

Sans sérif et sérif peuvent être combinés sur une même page. Quand on combine plusieurs polices de caractères, il est important de décider à l’avance comment elles vont s’intégrer, s’harmoniser ou contraster. En général, il ne faut pas utiliser plus de deux polices de caractères sur une même page, pour garder une cohérence et ne pas « gêner » la lecture. Une excellente typographie est invisible et elle n’entrave ni la lecture, ni l’information. Un surplus de polices de caractères sur une même page distrait le lecteur, crée une intrusion visuelle qui casse le rythme de lecture.

2/ Considérer la qualité de l’affichage

La qualité de l’affichage varie énormément : affichage sur un portable 15# 1024×780, 22# en 1680×1050, etc… Dans le choix de la police de caractères, de sa taille, de ses variations, il faut prendre en compte le média de parution final et son effet sur la lisibilité. L’italique généralement gênante sur les écrans, peut être très lisible sur support papier. A l’inverse, avec une mauvaise qualité d\’impression, les petites sérifs peuvent être illisible sur papier, ou les très petites lettres en gras peuvent ressortirent pleines.
Lire la suite…

10 choses qu’un Webdesigner doit savoir

1247001022_notebook_acceptLes « 10 choses que chaque Webdesigner (débutant) doit savoir » est un article à l’origine de John Urban librement traduit et adapté par mes soins.
J’ai plusieurs autres choses à rajouter, mais je le ferai plus tard, dans un autre article lié à celui là … en avant !

Dans les nombreux aspects de création d’un site, le Webdesigner joue des rôles multiples, et doit avoir une connaissance approfondie sur la structuration de site.
La plupart des choses que l’on apprend viennent de ses propres expériences dans le travail. Apprendre est un processus graduel, il n’y a pas meilleur école que de commettre des erreurs et d’en tirer des leçons. Dans cet article, nous allons voir un exemple de 10 conseils essentiels pour tout bon Webdesigner.

1/ Optimiser le graphisme pour un chargement plus rapide :

Comment optimiser les images en sélectionnant le bon format de compression, et faire en sorte qu’elles soient aussi légères que possible ? Même si les connexions internet sont de plus en plus rapides, il faut penser aux internautes qui ne sont pas dans les grandes villes, qui ont encore une connexion lente et/ou de vieux modems. Avec l’émergence des technologies mobiles, il faut aussi penser aux utilisateurs qui n’ont pas forcément une large bande (3G), dont les terminaux ne chargeront même pas des images trop lourdes.
Une règle générale est de choisir le bon format de fichier : les images avec des couleurs pleines (en aplat) sont souvent meilleures (poids + qualité) en formats PNG ou GIF, alors que les images type photo, sont meilleures en format JGP. Il y a une petite exception pour les images contenant un dégradé, là il faut faire des tests, entre GIF , PNG et JPG, en mixant qualité d’image et poids du fichier, le résultat peut être meilleur dans tel ou tel format selon l’image, là il n’y a pas de règle, c’est le jugement personnel.
Lire la suite…

 Page 2 de 3 « 1  2  3 »