Vous êtes ici : Accueil » français » Joli style pour formulaire forcé

Joli style pour formulaire forcé

D 4 mai 2010     A Benjamin Sonntag    


Toutes les versions de cet article : [English] [français]

Ces derniers jours, j’ai amélioré, avec l’aide précieuse de Chantal et de Nicolas, l’ergonomie d’AlternC, le panneau de contrôle web d’hébergement, mon projet libre de longue date ...

Dans ce contexte, j’ai mis au point un style fort sympathique pour afficher des "formulaires forcés", à savoir des zones de texte dans laquelle une partie du contenu est verrouillé.

Comment cela marche-t-il et à quoi cela sert-il ? ...

Des zones de textes tristounes

Sur le web, on est souvent amené à remplir des formulaires, zones de texte, cocher des cases etc. Cela fait même partie de notre principal usage d’Internet : lorsque l’on fait une requête sur un moteur de recherche : on remplit un formulaire. Lorsque l’on veut envoyer un mail : on remplit des zones de textes diverses avec destinataire, sujet, contenu etc.

Parfois, il arrive que nous devions entrer dans un formulaire uniquement la fin ou le début d’une information.

Par exemple : Je veux créer une adresse email sur un nom de domaine qui m’appartient. Je ne dois rentrer, logiquement, que la partie gauche de l’arobase, la partie droite étant fixée et imposée.

Historiquement, nous faisions, pour AlternC comme tout le monde : une zone de texte, suivi du @mondomaine.net montrant que la partie droite était "pré-remplie".

Graphiquement, cela donnait un formulaire tout à fait classique comme suit :

Une zone de texte stylée

Ces derniers jours, à force de traîner mes yeux sur ces formulaires, j’ai eu l’idée (je dis que j’ai eu l’idée car je n’ai vu cela nulle part ailleurs) de styler ces 2 morceaux de HTML pour obtenir quelque chose de plus évident pour un humain. J’ai obtenu ceci :

Les différences sont multiples entre ces 2 formulaires, mais ce qui m’intéresse c’est le champ permettant de remplir son adresse email.

Dans le second cas, on voit bien mieux que l’on va remplir une zone de texte correspondant à une adresse email. Le curseur est aligné à droite, et collé au texte @mondomaine.net. Les zones HTML sont stylées de telle sorte que l’on ne voit pas la différence entre les deux. Et aucune bidouille javascript n’est nécessaire pour empêcher que l’on édite le nom du domaine : il est en dehors de la zone de texte !

Cette idée est toute simple, mais, amis développeurs, je vous invite à l’utiliser sans vergogne : elle permettra à vos utilisateurs de bien mieux comprendre où vous voulez en venir avec vos formulaires ;)

Techniquement, c’est très simple :

côté HTML :

<input type="text" name="addresse" id="adrtxt" class="int" /><span class="int" id="adrlbl">@mondomaine.net</span>

côté CSS :

.int {
        border: 1px dotted black;
        background-color: white;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        padding: 2px;
        color: black;
}
#adrlbl {
 border-left: none;
 padding-left: 0px;
 text-align: right;
}
#adrtxt {
 border-right: none;
 padding-right: 0px;
}

Dans la même série, trois derniers conseils pour la route, qui me revienne en tête à l’instant :

- définir un glossaire pour votre site, et ainsi d’éviter d’utiliser des termes différents pour un même concept (par exemple "email", "mail", "compte mail", "adresse email" ...)
- préférer de loin les boutons radio aux listes déroulantes (un petit exemple comparatif ci-dessous) surtout sur un nombre d’élément court :

avant :

après :

- laissez de la place à vos formulaires, l’oeil humain a besoin de liberté pour mieux voir. Par exemple, sur les 2 exemples ci-dessus, vous remarquerez que non seulement les nouveaux formulaires sont plus espacés que les anciens, mais en plus, le liseré n’est plus noir, il est gris clair, s’estompant quasiment dans le fond, et laissant l’oeil naviguer plus librement ...

Et promis, si d’autres idées d’ergonomie me reviennent, je vous en ferais par ici ;)

2 Messages

  • Il y a bien des idées intéressantes dans ces améliorations, par contre, je suis très septique sur l’habillage du champ courriel... que je n’aurais pas compris sans lire le descriptif textuel qui lui succède.

    • le curseur calé à droite évoque surtout un pipe de séparation. Il est très étrange de se caler en face comme pour écrire en arabe, de droite à gauche...
    • afficher un texte non modifiable dans une zone conventionnelle de saisie est également déroutant : je crois que j’ai la possibilité de modifier « mimi.net » alors qu’avant je ne pouvais clairement pas modifier « alternc.info ».
      De plus, l’on sait que les champs pré-remplis (ou qui paraissent tels, comme ici) sont plus facilement zappés par l’utilisateur...

    Voir en ligne : http://romy.tetue.net


    • De bonne idée, merci tétûe :) Par contre :

      - le curseur clignote, comme il se doit (d’ailleurs un js, facultatif donc, met le focus sur le premier champ de mon formulaire quand la page est chargée) on le confond donc difficilement ...

      - le champ est certes "prérempli" mais c’est le champ "principal" du formulaire : on arrive ici en cliquant sur un gros bouton "créer une adresse email sur mimi.net". Il est donc assez évident qu’il faut le renseigner

      - Cela me fait me souvenir que l’on n’a pas mis de petite étoile (*) rouge pour signaler les champs obligatoires, merci de ce rappel (indirect j’en conviens) je vais pallier à ce manque dans les sources d’AlternC ! :)

      - Sinon, bien vu sur le fait que cela peut aussi perturber l’utilisateur. Je vais réfléchir à améliorer le concept :) peut-être en mettant le texte de la zone (donc la partie modifiable) en noir et le nom de domaine (la partie non modifiable) en gris (la norme pour les parties "disabled" des formulaires)

      merci :)

  • J’aime bien l’idée d’utiliser les CSS pour améliorer la compréhension des formulaires par les internautes.

    Certes, cela peut porter à confusion 2 secondes, mais pas autant qu’une liste déroulante à choix multiple ou d’autres composants stylés bizarrement "juste pour faire beau" ...

    Par ailleurs, bien vu l’idée du glossaire, je vais voir à proposer cela pour les projets libres auxquels je participe : on est trop souvent incohérent dans ce domaine ...