L’attribut title

  • Le title peut être pésent sur les liens, mais sur d’autres éléments aussi. Il n’est pas obligatoire sur une image
  • Il doit donner les mêmes informations que le libelé du lien avec des informations en plus (par ex. “Nouvelle fenêtre”)
  • Il est très utile pour optimiser le référencement.
  • Le title est affiché sous forme d’info-bulle dans les navigateurs visuels.
  • Le plus possible, chaque lien doit avoir un libelé spécifique.
  • Il doit faire moins de 80 caractères

L’attribut alt

  • alt est un texte alternatif obligatoire et réservés aux images, objets et applets.
  • C’est un equivalent textuel à un élément graphique (une image / un objet / un applet) dans un navigateur qui ne les affichent pas. (navigateur vocal, images désactivées, problème de téléchargement de l’image, etc.)
  • Il est obligatoire sur ces éléments mais il peut être laissé vide (alt="") sur un élément qui ne soit que décoratif (par ex. les puces d’une liste)
  • On ne DOIT PAS l’utiliser sur un lien.
  • En cas d’absence de title sur un élément mais où le alt est présent, IE affichera le contenu du alt dans une info-bulle. Mais ce comportement n’est pas conforme.
  • Il doit faire moins de 60 caractères (si l’élément graphique nécéssite une explication plus longue, utiliser l’attribut longdesc)

La balise <a>

  • L’intitulé du lien doit faire moins de 80 caractères.
  • L’attribut title est facultatif. Il reprend les informations de l’intitulé du lien + autres informations
  • L’attribut title doit faire moins de 80 caractères.
  • Il est conseillé (par Google, entre-autres) de ne pas dépasser 100 liens par page, y compris pour un plan du site.
    Le critère 6.7 de Accessiweb (niveau Triple-A) préconise 40 liens maximum, hors des liens de navigation
  • Que le liens soit entrant ou sortant, les mots-clé présent dans le titre augmenteront les chances d’être bien référencé
  • Un lien dans un contexte sémentiquement identique à son propre libélé est plus pertinant

Le formulaire d’inscription

Les informations

Des informations concises et utiles

Le formulaire va d’abord donner une première impression au visiteur ; la page ne doit pas le faire fuir. Il ne faut pas oublier que les internautes ne sont pas patients, qu’ils passent souvent leur temps à remplir des formulaires d’inscription, à devoir donner des informations sur eux, leur goûts, etc., pour accéder à des pages. Il vaut mieux éviter de demander des informations en trop grand nombre ! D’abord, cela va charger votre base avec des informations dont vous ne ferez probablement pas usage (Allez-vous vraiment téléphoner à vos internautes ?!) Ensuite, cela peut décourager celui qui voulait s’inscrire. Non seulement c’est trop long mais il est aussi en droit de se demander pour quelle raison on a besoin de savoir sa ville pour jouer à un jeu en ligne. N’oubliez pas, d’autant plus, que s’il estime la question inutile ou trop personnelle, rien ne l’empêchera de remplir de fausses informations !

Aider à la saisie

Mentionnez, dés le début, les champs obligatoires et, comme précédemment, ne rendez obligatoires que ce qui doit vraiment l’être. Une aide contextuelle est la bienvenue. Pour indiquer un format de date, préciser en quoi on a besoin de telle information, etc. Attention, tout de fois, à ne pas surcharger le formulaire en renseignements : vos indications comme vos libellés, pour être efficaces, doivent être clairs, concis … inutile de faire de la littérature ici.

La présentation

Une présentation adaptée

Ce premier point acquis, soignez la présentation de votre page. Si le contexte de votre site nécessite un formulaire long, découpez le en plusieurs étapes que l’internaute pourra visualiser et identifier. Ainsi, il ne sera ni surpris ni lassé si, en validant sa page, il doit encore remplir d’autres renseignements.

Cheminement et actions

Dans ce type de questionnaire à étapes, il y a quelques règles à respecter. Il est notamment nécessaire de permettre de revenir aux étapes précédentes. Au moment de la validation finale, un récapitulatif de l’ensemble des informations données, avec la possibilité de les modifier, est, là aussi, le bienvenu. Que ce soit pour l’accessibilité du site… comme pour le confort de tous.

Exemple de découpage en ongletsExemple de navigation d’un formulaire à étapes

Pour un formulaire long comme pour un formulaire court, n’oubliez pas d’afficher une confirmation après la validation. Rien de plus perturbant pour un internaute que de n’avoir aucune explication de ce qu’il va découler d’une action qu’il vient de faire !

L’ergonomie et le design

Une utilisation fluide et agréable

Après avoir travaillé le contenu, apporter un soin tout particulier à sa présentation et à son comportement peut être d’une grande aide pour l’internaute et, là encore, contribuer à l’effort de séduction que vous faites envers lui. Découpez les types d’informations en zones, grâce aux balises et (c’est-à-dire la délimitation de la zone et son titre). La balise < label >, nécessaire aux navigateurs vocaux, est aussi très utile et très agréable. Elle permet de mettre le curseur dans le champ de saisie voulu quand on clique sur son étiquette. Et surtout, ce dont on se passe difficilement dès qu’on y a goûté, elle permet de cocher / décocher un bouton radio ou une case à cocher en cliquant sur son libellé (la zone de clic est considérablement élargie).

Un design agréable mais aussi informatif

Pour ce qui est du design lui-même, les feuilles de style vont vous permettre de rendre votre formulaire plus « sexy », apporter quelques agréments supplémentaires. Vous pouvez, par exemple, les utiliser combinées au javascript, pour modifier l’apparence d’un champ de saisie quand le focus est sur lui. Rien ne vous empêche non plus d’appliquer un style particulier à vos champs obligatoires ; de personnaliser vos champs de saisie aux couleurs de votre site, etc. Tant que vous ne faites pas de votre page un arc-en-ciel de couleurs doublé d’un feu d’artifice d’effets ! Mettez-vous à la place de l’internaute et simplifiez-lui la vie.

Le fonctionnement

La fiabilité des informations

Votre formulaire est maintenant d’une présentation irréprochable ; attaquons-nous à son fonctionnement (fiabilité, enregistrement) Il va, bien évidement, falloir vérifier les informations qui vous ont été indiquées : la présence du « @ » dans l’email, une date au format voulu, etc. Pour limiter les erreurs, vous pouvez avoir recourt au menus déroulants, à un calendrier cliquable, etc. Le tout est de minimiser la frappe de l’internaute (sans pour autant alourdir le formulaire inutilement). Faire une première vérification en Javascript peut vous permettre de limiter les sollicitations au serveur. Par contre, ne serait-ce que dans le cas où le Javascript est désactivé, il faut quand même faire une deuxième vérification côté serveur avant d’enregistrer les informations dans la base. A vous de juger, donc, en fonction du nombre d’informations à vérifier, de votre serveur, etc. Une petite astuce bien pratique est de désactiver le bouton de validation final dès qu’il a été cliqué une première fois. Cela permet d’éviter les inscriptions en doublons des internautes qui cliquent deux fois (soit que la page suivante est lente à charger et qu’ils s’impatientent ; soit qu’ils double-cliquent par habitude).

La confirmation

L’envoi d’un mail de confirmation va vous permettre de vérifier la validité du mail – si celui-ci est nécessaire pour le déroulement du jeu – en confirmant et achevant l’inscription via celui-ci. C’est également le moyen de rappeler à l’internaute ses paramètres de connexion. D’abord, même si votre envoi est immédiat, il peut très bien finalisé son inscription plus tard ; mais ainsi, il garde aussi une trace, dans ses mails, au cas où il perdrait son mot de passe … ou votre URL ! N’oubliez donc pas de rappeler, dans votre mail, le nom du jeu, son adresse, éventuellement comment se connecter et les informations personnelles de votre nouvel inscrit : login et mot de passe. Si nécessaire, vous pouvez également aiguiller votre nouveau joueur vers la prochaine étape de jeu, ce qu’il peut dès à présent faire. Ceci dépend surtout de la complexité de votre game-play.

La legislation

Les informations légales

Un dernier point à aborder, et non des moindres, est la partie légale. En premier lieu, un site qui récolte des informations sur des personnes -et c’est le cas d’un formulaire d’inscription – doit être déclaré à la CNIL. C’est totalement gratuit. Mentionnez alors votre numéro de déclaration dans votre page et rappelez au visiteur qu’il garde un droit de consultation et de modification des informations qu’il aura remplies.

Le règlement interne

Le formulaire est aussi l’occasion de faire lire et accepter le règlement du jeu et du site par le futur inscrit. N’autorisez la validation du formulaire que si le champ correspondant au règlement a été rempli.

La newsletter

Enfin, si vous proposez une newsletter, sachez que la Loi sur l’Economie Numérique, vous interdit d’inscrire l’internaute par défaut. Il doit lui-même cocher une case indiquant qu’il souhaite être abonné à la newsletter. Si le fonctionnement de votre jeu oblige à recevoir des mails, précisez-le. Un formulaire prêt et complet ;-) Fonctionnement, ergonomie, accessibilité, … ; séduction, look, fiabilité, … votre formulaire est maintenant fin prêt ! Il ne me reste plus qu’à vous souhaiter beaucoup d’inscrits ;)

Article écrit pour Game On Net (articles sur le développement de jeux en ligne)