Réseaux Articulate :

Articulate

Conseils pour concevoir des boutons qui invitent à cliquer

Conseils pour concevoir des boutons qui invitent à cliquer

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 : 

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.

Community Manager International chez Articulate et experte e-learning passionnée possédant des années d’expérience dans la création de modules e-learning efficaces.

9 commentaires

  1. Patrice ll y a 8 ans

    Des conseils simples mais efficaces !

  2. sylvie.zentar@gmail.com ll y a 3 ans

    Bonjour, très intéressant comme sujet, je suis en pleine découverte de Storyline… Efficace. Bon week-end

  3. francois31 ll y a 3 ans

    « 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. »

    et « Faites en sorte que vos boutons ressemblent aux boutons que vos apprenants ont l’habitude de croiser.  »

    bonjour Allison, merci pour ces petits tutos toujours sympas a lire. Concernant les phrases que j’ai reprises au dessus, je suis a moitié d’accord : ok pour s’orienter vers les formes standards , mais attention a la standardisation générale qui s’installe. Il ne faut pas non plus en faire une habitude ni une facilité! c’est là que l’on voit que le flat design a fait des dégats….

    j’ai l’impression qu’aujourd’hui , tout se ressemble. Cela a comme avantage qu’effectivement , l’apprenant n’est pas perdu , mais d’un autre coté, il n’y a plus de surprise. Perso, je pense que l’on doit certes respecter les régles que tu dis mais en meme temps , ne pas hésiter a sortir de la normalité dans le design et que de faire des boutons avec un look original (mais efficace) apportera un plus et permettra de se distinguer des autres…. et si l’apprenant arrive sur une IHM avec des boutons au look inhabituel, en général , il va vite d’adapter (sauf bien sur si le travail réalisé est pourri) et en plus , il profite de votre travail de design…

    c’est un peu comme quand on achète une voiture. maintenant, tous les tableaux de bord des différents véhicules au sein d’une marque se ressemblent. alors certes, on n’est pas perdu en changeant de véhicule mais d’un autre coté, on n’a pas l’impression de changer de véhicule aussi … et en plus on reporte d’un modéle a l’autre ,les défauts et qualité de l’IHM

    je suis peut etre vieux jeu mais aujourd’hui, je prends un malin plaisir à faire mes propres boutons, à y mettre beaucoup de variété d’un produit a un autre quand je peux (tout en respectant les régles ) et a priori, personne ne s’est encore plaint.

    merci en tout cas pour tout le travail sur le blog

    • Auteur
      Allison LaMotte ll y a 3 ans

      Bonjour François,

      Je pense qu’il vaut mieux axer la surprise et la nouveauté sur d’autres éléments du design, et non sur les boutons.

      C’est très important notamment pour l’accessibilité que les boutons soient facilement reconnaissables.

Pingbacks

  1. […] de biseau sur les boutons pour indiquer clairement qu’ils sont cliquables (Et lisez cet article : 4 conseils pour créer des boutons de navigation intuitifs), et utilisez une couleur différente ou soulignez les liens hypertextes. Ces normes de conception […]

  2. […] vous voulez supprimer complètement les consignes de navigation, consultez cet article pour vous assurer que vos boutons sont suffisamment intuitifs pour vous passer de […]

  3. […] Utilisez des formes rectangulaires (avec des bords arrondis ou carrés) pour les boutons. Il peut être utile d’ajouter une ombre portée pour les rendre plus visibles. Si vous préférez le flat design, assurez-vous que vos boutons se démarquent en utilisant, par exemple, une couleur audacieuse. Pour plus de conseils sur la conception de boutons, consultez cet article : 4 conseils pour créer des boutons de navigation intuitifs.  […]

Laisser un commentaire à francois31 Cliquez ici pour annuler votre réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*