Presque tous les modules e-learning ont au minimum un ou deux boutons. Souvent, les boutons sont utilisés pour la navigation (comme les boutons Suivant et Précédent), ou pour révéler plus d’informations (comme dans une activité où l’apprenant doit cliquer pour avoir plus d’informations). Avec autant d’utilisations des boutons, j’aimerais partager avec vous quelques bonnes pratiques en matière de conception de boutons qui aideront vos apprenants à vivre la meilleure expérience possible dans votre module.

Utilisez des mises en forme habituelles pour vos boutons 

Faites en sorte que vos boutons ressemblent aux boutons que vos apprenants ont l’habitude de croiser. Souvent, les boutons sont des rectangles avec des bords arrondis ou carrés. Parfois, ils comportent une ombre portée pour les rendre plus visibles. La plupart du temps, ils sont de couleur voyante, mais d’autres fois, seul le contour est en couleur.

L’essentiel est de les différencier du reste de votre conception, afin que les apprenants soient attirés par eux et sachent instinctivement qu’ils peuvent cliquer dessus.

Voici quelques exemples de boutons :

	Coloré avec ombre portée	Contour coloré et ombre portée	Coloré sans ombre portée	Contour coloré sans ombre portée
Simple rectangle
Coins arrondis
Oval

Cela signifie-t-il que vous ne pouvez pas créer d’autres styles de boutons ? Pas exactement. Cela signifie que vous devez privilégier les formes de bouton standard. Mais dans certains cas, il peut être judicieux d’utiliser une autre forme. Par exemple, si vous créez un module sur les animaux, vous voulez peut-être créer des boutons en forme d’empreinte de pattes. Et c’est une très bonne idée de conception ! Mais si vous utilisez une forme non standard, assurez-vous d’y ajouter les autres caractéristiques que l’on retrouve sur les boutons standards pour que les apprenants sachent immédiatement que ce sont des boutons. Au minimum, choisissez une couleur voyante et ajoutez une ombre portée pour que vos boutons se démarquent bien du fond.

Nommez les boutons de manière claire et précise

Les étiquettes des boutons indiquent à l’apprenant ce qui va se passer lorsqu’il cliquera. Vos étiquettes doivent être à la fois claires et précises ; leur but doit être évident. Comparons les deux boutons ci-dessous : 

Concis	Verbeux

Bien que les deux boutons indiquent clairement à quoi sert le bouton, celui de gauche est plus concis, ce qui permet aux apprenants de comprendre plus rapidement et plus facilement à quoi il sert.

Utilisez des icônes reconnaissables

Une bonne façon d’aider l’apprenant à identifier rapidement la fonction d’un bouton est d’utiliser une icône. Par exemple, une flèche vers le bas pour un bouton Télécharger.

Regardons un exemple :

Texte seul	Texte avec icône

Le bouton de gauche convient parfaitement, mais voyez-vous comment l’ajout de l’icône renforce le texte et rend encore plus évident le rôle du bouton ?

Certaines personnes créent également des boutons contenant uniquement des icônes, sans aucun texte. Si vous décidez d’emprunter cette voie, assurez-vous de choisir des icônes dont la signification est sans ambiguïté. Sinon, vos apprenants pourraient se demander à quoi servent certains boutons.

Même les icônes qui vous semblent évidentes peuvent ne pas l’être pour vos apprenants. Par exemple, examinons à nouveau cette icône de téléchargement seule :

Lorsqu’elle était à côté du mot Télécharger, le sens de cette icône était clair. Mais maintenant qu’elle est toute seule, tout à coup, le sens n’est plus si évident. Elle pourrait signifier Télécharger, mais elle pourrait aussi montrer quelque chose situé plus bas . Pour éviter toute confusion, il est recommandé de toujours inclure du texte que ce soit sur le bouton, en dessous ou au survol.

Donnez des retours lorsque les apprenants interagissent avec le bouton 

Avez-vous déjà remarqué que lorsque vous survolez un bouton ou un lien hypertexte, la flèche du pointeur devient une petite main ? Il s’agit d’un signal subtil indiquant que l’objet est cliquable. D’autres indices visuels courants que l’on peut trouver sont le changement de couleur ou de forme, une petite animation ou l’apparition d’une autre icône, comme une case cochée.

Si vous créez votre module dans Storyline 360, vous pouvez utiliser la fonctionnalité États pour modifier le format de vos boutons lorsque les apprenants les survolent, cliquent dessus ou les font glisser, par exemple. Pour en savoir plus, cliquez ici : Guide des boutons de Storyline.

Restez cohérent

Les apprenants s’attendent à ce que vos boutons fonctionnent de manière cohérente à travers le module. Assurez-vous d’utiliser un format similaire pour tous vos boutons. Utilisez la même forme, couleur, police et taille, quelle que soit leur fonction.

Les boutons ayant la même fonction doivent apparaître au même endroit sur chaque diapositive, sans se déplacer d’une diapositive à l’autre. Cela vous assure que les apprenants sauront toujours où chercher et sur quoi cliquer.

Pour garantir la cohérence, il est judicieux de définir ces normes lorsque vous commencez à concevoir votre module et de vous y référer pendant l’étape de conception.

En résumé

N’oubliez pas : les apprenants ne devraient pas avoir à chercher les boutons ou à deviner leurs fonctions. Lorsqu’ils sont faciles à repérer, clairement nommés et qu’ils agissent comme les apprenants l’attendent, ils amélioreront le contenu de votre module. Dans le cas contraire, ils risquent de distraire vos apprenants. Et ce n’est pas ce que vous voulez après avoir passé tant de temps à créer votre module.

Vous recherchez d’autres conseils pour concevoir des modules où il est facile de naviguer et qui sont adaptés aux besoins des apprenants ? Consultez ces articles : 

• Que sont le design d’expérience utilisateur (UX) et le design d’interface utilisateur (UI) et comment les appliquer au e-learning ?
• 3 principes de conception de l’interface utilisateur pour les développeurs e-learning
• Comment améliorer l’expérience d’apprentissage

Avez-vous des bonnes pratiques ou des exemples de bonne conception de boutons ? Si c’est le cas, veuillez laisser un commentaire ci-dessous pour partager !

Vous voulez essayer quelque chose que vous avez appris ici, mais vous ne possédez pas Articulate 360 ? Démarrez un essai gratuit de 30 jours et abonnez-vous au blog pour obtenir des conseils utiles sur tout ce qui concerne le e-learning. Si vous avez des questions, n’hésitez pas à les poser dans les commentaires.