Champ de saisie trop étroit

Un répondant saisit son âge, 53, dans un champ - et le champ affiche « 5 ». Le « 3 » est toujours là, mais il n'apparaît que tant que le curseur se trouve dans le champ. Dès que le répondant passe à la suite, la réponse semble fausse, et beaucoup reviennent la « corriger ». Résultat : une valeur erronée ou un répondant agacé. SurveyTester mesure chaque champ texte et numérique dans la page affichée et signale comme constat un champ trop étroit pour sa valeur. Le contrôle fait partie des contrôles Auto-Detect et s'exécute sans que personne ait à le lancer.

Pourquoi un champ trop étroit est difficile à repérer

• Cela dépend de la page affichée, pas du script. La largeur réelle d'un champ vient du modèle du questionnaire, du CSS, de la police et de l'écran. Le script du questionnaire n'en dit rien, et un champ assez large sur l'écran du programmeur peut ne faire que deux chiffres sur un téléphone.
• Cela n'apparaît qu'avec la bonne valeur. Un testeur qui saisit « 7 » dans le champ âge ne voit rien d'anormal. Le problème apparaît avec « 53 », un numéro de téléphone à dix chiffres ou un code postal - précisément la valeur que le testeur n'a pas saisie.
• Cela passe facilement inaperçu, même quand cela arrive. Pendant la saisie, le champ défile avec le curseur : le testeur voit donc toute la valeur. Ce n'est qu'en quittant le champ qu'une partie est masquée.
• Le même champ se répète. Un modèle à largeur de champ fixe touche chaque question numérique du questionnaire, dans chaque langue - mais personne ne teste chaque question numérique avec sa valeur la plus longue.

Fonctionnement

Lorsqu'une page d'un test est ouverte, l'extension de navigateur SurveyTester mesure les champs texte et numériques visibles directement dans la page affichée : la largeur réellement disponible pour le texte (largeur du champ moins les marges intérieures et, pour un champ numérique, moins les flèches), avec la police, la taille et l'espacement réels du champ. C'est une mesure, pas une estimation à partir du HTML.

Le contrôle s'exécute dans tous les types de tests :

• SurveyBots - chaque champ est mesuré juste après que le bot a saisi sa réponse.
• Tests manuels et liens de test - chaque champ est mesuré lorsque le testeur le quitte après la saisie ; les champs qui contiennent déjà une valeur (par exemple après un retour en arrière) sont mesurés à l'ouverture de la page.

Quand il se déclenche

Un champ est signalé dans deux cas :

1. La valeur saisie ne tient pas. Le texte saisi est plus large que la partie visible du champ : le répondant n'en voit que le début.
2. La valeur la plus longue autorisée ne tiendrait pas. Pour les champs numériques, SurveyTester examine aussi les limites que le questionnaire fixe au champ - l'attribut maxlength (nombre de caractères) et les valeurs max et min - et vérifie si la valeur la plus large qu'elles autorisent tiendrait. Un champ avec maxlength="3" qui n'affiche que deux chiffres est signalé même si le bot a saisi « 7 ». Un seul test suffit ainsi à trouver le problème, sans que personne ait à essayer la valeur la plus longue.

Une petite tolérance de deux pixels absorbe le curseur et les arrondis, afin qu'une valeur qui tient tout juste ne soit pas signalée.

Ce qui n'est pas contrôlé

• Les champs texte longs. Un champ de texte libre destiné à une phrase est fait pour défiler ; le test de longueur maximale ne s'applique qu'aux champs numériques. Un champ texte n'est signalé que si la valeur réellement saisie est tronquée.
• Les limites irréalistes. Un maxlength supérieur à 12 chiffres est considéré comme une limite technique, pas comme la longueur que les répondants doivent saisir.
• Les champs masqués, en lecture seule et désactivés, ainsi que la barre SurveyTester elle-même.
• Les répétitions. Chaque champ est signalé une fois par page d'un test, et le texte du constat ne contient que les propriétés du champ, pas la valeur saisie. Vingt bots saisissant vingt âges différents produisent donc un seul constat pour le champ, pas vingt.

Lire le constat

Le constat s'intitule Champ de saisie trop étroit – la valeur saisie est tronquée et indique le champ (son nom ou son id), la largeur disponible pour le texte en pixels, le nombre de chiffres que le champ peut afficher et, le cas échéant, le maxlength du champ. Dans la session de test, le champ est marqué directement sur la page du questionnaire ; le marqueur indique par exemple que le champ fait 18px de large et n'affiche qu'un chiffre.

Comme tout constat détecté automatiquement, il est soit accepté - il devient un ticket pour l'auteur du questionnaire - soit refusé avec un motif, par exemple lorsque le champ est volontairement compact.

Comment le corriger dans le questionnaire

La correction se trouve presque toujours dans la mise en page du questionnaire, pas dans sa logique :

• Élargir le champ. La plupart des plateformes d'enquête proposent un réglage de largeur ou de taille pour les questions numériques et texte. Réglez-le sur la valeur la plus longue que saisiront les répondants, avec un peu de marge.
• Utiliser le CSS. Si le modèle impose une largeur fixe, remplacez-la pour ce champ ou pour tous les champs numériques, par exemple avec width: 6em;. Les unités liées à la police (em, ch) suivent la taille du texte ; min-width empêche le champ de rétrécir sur les petits écrans. width: 5ch; laisse la place pour exactement cinq chiffres dans la police du champ.
• Utiliser l'attribut size. Sur un champ HTML simple, size="5" demande au navigateur un champ d'environ cinq caractères de large - mais une largeur CSS définie par le modèle l'emporte.
• Vérifier les limites. Si le champ est volontairement étroit, assurez-vous que maxlength et max correspondent aux valeurs réellement attendues. Un maxlength="10" sur un champ âge est une erreur de programmation en soi.
• Tester sur un téléphone. Les modèles adaptatifs réduisent souvent les champs sur les petits écrans. Lancez des SurveyBots ou un test manuel avec un réglage d'appareil mobile pour voir si le champ tient encore.

Après la correction, le test suivant mesure à nouveau le champ ; s'il tient, aucun nouveau constat n'apparaît.

Activer ou désactiver le contrôle

Le contrôle figure parmi les contrôles Auto-Detect sous le nom Détecter les champs de saisie trop étroits. Comme les autres contrôles, il s'active ou se désactive pour toute l'entreprise dans Administration › Paramètres de l'entreprise › Détection automatique des tickets, ainsi que par type de projet et par projet. Le désactiver arrête la mesure pour les nouveaux tests ; les constats déjà signalés restent dans la liste. Voir Auto-Detect Issues et Configurer la détection automatique des tickets par type de projet.

Remarques

• Le contrôle nécessite l'extension de navigateur SurveyTester, car seule la page réelle connaît la largeur effective d'un champ. Les pages analysées sans navigateur - un questionnaire téléversé, par exemple - ne sont pas mesurées.
• La mesure reflète la fenêtre du navigateur du test. Un champ qui tient sur un écran d'ordinateur peut être trop étroit sur un téléphone ; testez avec les réglages d'appareil de vos répondants.
• Les listes déroulantes, curseurs et zones de texte multilignes ne sont pas mesurés.

À retenir

Un répondant qui ne voit pas ce qu'il a saisi abandonne ou répond faux. SurveyTester mesure chaque champ dans la page affichée, avec la valeur réellement saisie et avec la valeur la plus longue que le champ autorise : un champ trop étroit est ainsi trouvé dès le premier test - pas par le premier répondant.