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.

Air Guitar on you !

L’entreprise de design FauvelKhan créée par deux étudiants britanniques, Luke Khan et Warren Fauvel, était en course pour obtenir le prix de la meilleure technologie liée à la musique à l’occasion du festival SXSW (Festival du film et de la musique interactive) qui se déroulait à Austine (Texas).
Le produit des deux designers est un t-shirt qui permet de faire du Air Guitar un peu spécial, puisqu’il peut se transformer en une « véritable » guitare. Concrètement, il s’agit d’un tee-shirt sur lequel est imprimé le corps d’une guitare et un flash-code.
Une fois connecté au site The Last Republic et le flash code situé au bon endroit (en face de la webcam), le morceau peut commencer.

Les créateurs expliquent avoir développé cette technologie pour le groupe The Last Republic, mais espèrent maintenant que ça révolutionnera l’industrie de la musique. Luke Khan, qui est diplômé en design industriel, explique ainsi à l’agence Press Association :

C’était une véritable surprise d’être la seule entreprise basée en Europe à être sélectionné pour le concours. SXSW nous met sur la scène internationale et cela signifie que l’entreprise a de l’avenir.

La vidéo de démonstration :

The Last Republic – Augmented Reality – Air Guitar from FauvelKhan

Tous deux jeunes diplômés, Fauvel & Khan ont gagné la récompense « Boostrap » pour ce concept original au festival SXSW. Le « Boostrap » est le prix qui récompense le projet le plus innovant qui nécessite le moins d’investissement financier. Ils peuvent espérer bénéficier d’une rapide reconnaissance et d’une grosse médiatisation.
Une belle innovation !!

Animation de texte : Kinetic Typography

En anglais : Kinetic Typography. Une technique d’animation dont je suis un grand fan, un mélange de mouvement et de texte. On voit couramment cette technique dans les séquences titres de films et les crédits, ainsi que dans certaines animations Flash sur le web. Un superbe travail de Jacob Gilbreath, sur le discours d’adieu de l’émission The Tonight Show sur NBC avec le présentateur Conan O’Brien, est visible ci-dessous, logiciels : Illustrator, Cinema 4D, After Effects.

Encore un travail de Kinetic typography sur la bande son des 8 règles du Fight Club (projet de fin d’étude) :

Une petite dernière avec la célèbre scène de Pulp Fiction dans le café :

 Page 3 de 7 « 1  2  3  4  5 » ...  Last »