Nouveau E-learning

Champ de saisie

Un champ de saisie permet à l’apprenant d’entrer librement une donnée au clavier (mot, phrase, nombre). Il doit toujours être associé à une étiquette visible et explicite, accompagnée d’indications sur le format attendu et, en cas d’erreur, d’un message compréhensible.

Sur cette page

Deux variantes dans Storyline 360

  1. Zone de saisie de texte : saisie alphanumérique libre (mot, phrase, texte court).
  2. Zone de saisie numérique : saisie restreinte aux chiffres (montant, durée, résultat de calcul).

Point de vigilance structurel

Le champ de saisie est restitué comme zone d’édition par les technologies d’assistance, mais son étiquette visible n’est jamais associée automatiquement au champ dans Storyline. Le nom accessible doit donc être renseigné manuellement pour chaque champ (voir section Accessibilité).

Quand utiliser un champ de saisie

  1. Un menu burger peut être utilisé pour offrir une interface épurée et centrée sur le contenu, en masquant les options de navigation jusqu’à ce qu’elles soient nécessaires.
  2. Si votre site comporte de nombreuses options de navigation, le menu burger permet de désencombrer l’apparence visuelle en regroupant ces options dans une barre latérale ou un menu déroulant.

Quand ne pas utiliser un champ de saisie

  1. Sur les sites de bureau disposant d’un large espace. Utiliser une barre ou un menu de navigation traditionnel améliore l’ergonomie en rendant les options immédiatement visibles.
  2. Pour les sections essentielles du site. Si certaines rubriques doivent être vues dès l’arrivée (par ex. sélecteur de langue), un menu burger risquerait de les masquer et de diminuer leur visibilité.
  3. Lorsque le site ne comporte que quelques pages. Il est généralement plus efficace d’afficher directement les liens de navigation pour un accès simple et rapide.

Sur cette page

Implémentation

  • Aller dans Insertion → Saisie
  • Choisir « Zone de saisie de texte » ou « Zone de saisie numérique »
  • Tracer la zone d’insertion sur la diapositive
  • Renommer la variable générée automatiquement (TextEntry, TextEntry1…) avec un nom explicite : la maintenance, les déclencheurs et la relecture en dépendent

Nom accessible (obligatoire)

  • Clic droit sur le champ → « Accessibilité… »
  • Vérifier que l’objet est visible pour les outils d’accessibilité
  • Renseigner le texte de remplacement (également modifiable depuis le panneau Ordre de focus)
  • L’étiquette visible placée à côté du champ n’étant pas liée automatiquement, le texte de remplacement doit reprendre exactement cette étiquette, sans l’abréger ni la contredire.
  • Un champ sans texte de remplacement est restitué par le nom de l’objet dans la timeline (« TextEntry1 ») : non conforme.

Étiquette et aide à la saisie

  • Étiquette visible et permanente, placée au-dessus du champ.
  • Ne jamais utiliser le texte par défaut du champ comme seule étiquette : il disparaît dès la saisie et doit être effacé par l’apprenant.
  • Indiquer avant le champ le format attendu, l’unité, la longueur maximale et le caractère obligatoire, en texte et non par un astérisque seul.

Contrôle de saisie et gestion des erreurs

  • Message d’erreur en texte explicite, jamais véhiculé par la couleur ou une icône seule.
  • Indiquer la nature de l’erreur et la correction attendue (« Saisissez un nombre entre 1 et 10 »).
  • Toujours autoriser une nouvelle tentative sans perte de la saisie déjà effectuée.
  • Pour les questions à saisie : lister toutes les variantes acceptées (casse, accents, singulier / pluriel, abréviations). Ne pas sanctionner une faute d’orthographe lorsque l’objectif pédagogique porte sur le fond.

Règles structurelles

  • Un seul objectif de saisie par diapositive ; grouper visuellement chaque champ avec son étiquette.
  • Ne pas redemander une information déjà renseignée : réutiliser la variable (%Prenom%).
  • Aucune limite de temps sur une saisie ; si une contrainte de temps existe, elle doit être prolongeable ou désactivable.

Sur cette page

Interaction au clavier

L’ordre de tabulation doit suivre la logique visuelle : étiquette au-dessus du champ, progression haut → bas.

Accordion keyboard navigation function table
Touche Fonction
Tab/Maj Tab
  • Atteindre le champ de saisie
  • Revenir à l’élément précédent
Espace/Entrée Activer le bouton « Valider »