Accueil
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ésitez pas à le
tester et à poser vos question si vous en avez.
Voilà c'est fini à bientôt sur le forum.
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ésitez pas à le
tester et à poser vos question si vous en avez.
Voilà c'est fini à bientôt sur le forum.
