Nous allons donc tenter de créer LE formulaire, un formulaire qui rassemble tous les bons points cités ci-dessus, en veillant évidemment à ne pas répéter les erreurs. Bien entendu, je vais appliquer tous ces conseils pour créer une maquette et l’appliquer à Wks.fr

Vous pourrez ensuite utiliser ce tutoriel pour créer vous-même un formulaire parfait pour votre site Internet.

Avant toute chose, je vais maintenant faire un récapitulatif des points à mettre en place pour ce futur formulaire parfait.

Le formulaire doit être identifiable par un gros titre « Ajouter un commentaire » (ajouter une icône pour agrémenter ce titre est tout à fait envisageable voir souhaitable).

Vous devez ensuite créer un formulaire lisible facilement du haut vers le bas. Ainsi veillez à aligner chacun des éléments sur la gauche (l’erreur la plus répandus est l’alignement du bouton de soumission à droite, veillez donc à bien l’aligner sur la ligne de lecteur).

Vous devez également simplifier au maximum le formulaire, dans le but d’y parvenir vous pouvez par exemple optimiser l’espace (en ne perdant pas d’espace vide, comme c’est souvent le cas à droite des champs) et en affichant les libellés directement dans les champs du formulaire.

Vous devez également apporter votre touche design et adapter le formulaire à la charte graphique de votre site Internet, celui-ci se trouvant en bas de page il permettra de rappeler à l’internaute que vous vous trouvez toujours sur le même site Pour vérifier cette étape demandez-vous s’il serait possible d’identifier votre site en ne regardant que ce formulaire ?

Afficher un bouton facilement identifiable et cliquable, pour permettre au lecteur de valider son formulaire rapidement.

Pour conclure, plus un formulaire aura été réfléchis plus il donnera l’envie au lecteur de le remplir et donc de poster un commentaire. Sur certaine site le formulaire est un telle corvée que beaucoup regrette d’avoir voulus participer au site. Rendre cette participation agréable fera progresser votre taux de participation de façon incroyable ! Faite le test.

Dans le but d’y parvenir je vous propose maintenant un tutorial pour créer un formulaire parfait, tant au niveau du placement que du design.

Je ne décrirais pas ici le coté programmation et mise en page, je survolerais simplement les étapes nécessaires à la création de la maquette via Photoshop.

ETAPE 1

J’ouvre le logiciel Photoshop puis je crée un nouveau document de la largeur de ma page Internet, dans mon exemple je vais créer la maquette pour wks.fr, je vais donc créer une maquette de 600 pixels de large.

Je place tout en haut le titre de mon formulaire.

ETAPE 2

Puis j’utilise l’outil rectangle arrondie pour créer la base de mon formulaire. Ce rectangle permettra de contenir l’ensemble du formulaire, l’identification se fera ainsi plus rapidement et permettra de bien se rendre compte ou commence et ou se termine le formulaire.

ETAPE 3

Pour créer le premier champ de mon formulaire, j’utilise simplement ce même outil rectangle arrondie et l’outil texte pour simuler le libellé placé à l’intérieur.

ETAPE 4

Je crée un second champ qui symbolise l’état « sélectionné » en effet pour simplifier la saisie du formulaire nous allons modifier le design du champ sélectionnée.

ETAPE 5

Je crée ensuite tous les autres champs du formulaire.

ETAPE 6

J’ajoute en bas de page un bouton de publication qui permet à l’utilisateur de publier son commentaire. Je le crée suffisamment voyant et sexy pour inciter et faciliter l’action de soumission.

ETAPE 7

Je prépare dors et déjà un second bouton pour l’état hover. Pour une optimisation de l’action je choisis le vert qui symbolise la validation.

ETAPE 8

Je vais maintenant ajouter une petite aide à mon formulaire. Ces textes viendront compléter le formulaire et permettront à l’utilisateur de ne jamais se perdre dans son action.

Remarque dans mon exemple j’utilise un style « fait à la main » (handwriter style) qui renforce le coté aide personnalisé.

J’ajoute donc une flèche et un commentaire à la droite de mon premier champs.

Pour information j’ai utilisé ici la police de caractère : « Max’s Handwritin font » téléchargeable sur cette adresse : http://simplythebest.net/fonts/fonts/maxs_handwritin.html

Et le pack de brush :

http://thinkdesignblog.com/120-handdrawn-vector-arrows.htm

http://qbrushes.com/photoshop-abstract-brushes/creative-doodles-photoshop-brushes/

ETAPE 9

Je fais la même chose pour tous les autres champs.

Et voila mon formulaire est maintenant terminé, à la publication de cet article le nouveau formulaire de soumission des commentaires de wks.fr devrait être mis à jour, n’hésité pas à le tester et à poser vos question si vous en avez.

Merci à tous d’avoir lus ce nouveau tutorial sur wks.fr !

Je rappel que cet article est en deux partie, voici le lien pour vous rendre sur la première partie : Les meilleurs conseils par l’exemple pour optimiser son formulaire de soumission de commentaire.