Nouveau E-learning

Boutons

Un bouton est un élément interactif qui, lorsqu’il est cliqué ou activé, déclenche une action : valider une réponse, passer à la diapositive suivante, afficher une couche ou lancer un média. Il constitue le principal levier d’interaction et de navigation dans un module e-learning.

Dans Articulate Storyline, les boutons constituent des éléments interactifs fondamentaux du parcours apprenant. Ils permettent de contrôler la progression dans le module, d’initier des interactions pédagogiques et de déclencher des variables ou des conditions qui pilotent l’expérience d’apprentissage. Leur conception doit garantir une affordance visuelle claire, une cohérence avec la charte graphique du module et une accessibilité totale au clavier et aux technologies d’assistance.

Sur cette page

Typographie

Même police que le module, corps identique ou légèrement supérieur au texte courant, sans descendre sous 16 px.
Libellé centré, sur une seule ligne, de un à trois mots commençant par un verbe d’action : « Valider ma réponse », « Continuer », « Recommencer ».
Pas de capitales intégrales, pas d’italique ; texte jamais tronqué : le gabarit s’adapte au libellé le plus long, y compris après traduction.

Zone d'interaction

  1. Cible recommandée 44 × 44 px, minimum 24 × 24 px, y compris pour les boutons icône.
  2. Remplissage interne minimum 12 px horizontal et 8 px vertical.
  3. Espacement minimum 8 px entre deux boutons ; 24 px entre un bouton destructif ou irréversible et ses voisins.

Mise en page et cohérence

  1. Position, ordre et libellés des boutons de progression identiques sur toutes les diapositives d’un même parcours.
  2. Un seul vocabulaire d’action pour tout le module : ne pas alterner Valider / Confirmer.
  3. La couleur des boutons doit être distincte de celle des liens et des couleurs de retour de réponse (correct / incorrect), pour éviter toute confusion de rôle.
  4. Aucun bouton signalé par la seule couleur ou la seule icône, aucune animation clignotante pour attirer l’attention.

Quand utiliser un bouton

  1. Déclencher une action : valider une réponse, afficher une couche, lancer une animation, réinitialiser une interaction.
  2. Piloter la progression : passer à la diapositive suivante ou précédente dans un parcours contrôlé.
  3. Scénario branché : proposer à l'apprenant des options d'action explicites et distinctes..

Quand ne pas utiliser un bouton

  1. Renvoi vers une ressource externe (site, document) : utiliser un lien, dont le comportement est mieux annoncé.
  2. Sélection d'une réponse parmi plusieurs : utiliser des boutons radios ou des cases à cocher, qui portent la notion d'état sélectionné.
  3. Élément décoratif ou non cliquable : ne pas donner l'apparence d'un bouton à une forme inerte.

Sur cette page

Étiquetage et restitution

  • Chaque bouton doit porter un libellé explicite qui renseigne sur l'action déclenchée, et non sur sa forme (éviter « Cliquez ici », privilégier « Valider ma réponse », « Passer à la suite »).
  • Renseigner systématiquement le champ "Accessibilité" dans Storyline pour les boutons dont le libellé visuel est absent ou insuffisant (boutons icônes, boutons image).

Contraste

  1. Libellé / fond du bouton : ratio minimum 4,5:1 dans tous les états.
  2. Fond ou bordure du bouton / fond de la diapositive : ratio minimum 3:1, afin que la limite du bouton soit perceptible.
  3. Indicateur de focus : ratio minimum 3:1 avec les couleurs adjacentes, épaisseur minimum 2 px, jamais tronqué par le contour du bouton ni masqué par un objet voisin.
  4. Icône accolée au libellé : ratio minimum 3:1, et retirée de l’ordre de focus si elle est purement décorative.
  5. État désactivé : rester lisible, l’atteinte du 4,5:1 est recherchée ; ne jamais descendre au point de rendre le libellé indéchiffrable.

Focus clavier

L'indicateur de focus doit être visible et suffisamment contrasté pour être perceptible par les apprenants naviguant au clavier.
L'ordre de tabulation doit suivre la logique pédagogique de la diapositive et être configuré manuellement dans le panneau d'accessibilité de Storyline.
Un bouton en état estompé doit être exclu de l'ordre de tabulation.

Comportement et interaction

Un bouton ne doit déclencher son action qu'à l'activation explicite (Entrée ou Espace), jamais au simple focus.
Dans les scénarios branchés, chaque bouton de choix doit être atteignable et activable indépendamment des autres, sans contrainte d'ordre imposée à l'apprenant.
Les boutons déclenchant l'ouverture d'un contenu (calque, fenêtre) doivent permettre de refermer ce contenu au clavier sans perdre le point de focus initial.

    Sur cette page

    Interaction au clavier

    Dans un module e-learning Articulate Storyline, la navigation clavier sur les boutons repose sur les touches suivantes :

    Accordion keyboard navigation function table
    Touche Fonction
    Tab/Shift tab
    • Atteindre le bouton dans l'ordre de tabulation de la diapositive
    • Revenir au bouton précédent dans l'ordre de tabulation
    Espace/Entrée
    • Activer le bouton et déclencher l'action associée
    • Alternative pour activer le bouton

    L'ordre de tabulation des boutons doit être configuré manuellement dans le panneau dans storyline. Un bouton mal positionné dans cet ordre peut rompre la logique pédagogique du parcours, notamment dans les scénarios branchés où l'ordre d'activation des choix a un sens didactique.
    Un bouton désactivé (état Disabled dans Storyline) doit être exclu de l'ordre de tabulation afin de ne pas générer une étape de navigation sans action possible pour l'apprenant.