Le terme interface utilisateur (UI) renvoie à la partie visuelle d’une application ou d’un module e-learning avec laquelle les utilisateurs interagissent. Cela inclut les menus et les boutons mais aussi la mise en page.

Une bonne interface utilisateur est celle avec laquelle les utilisateurs comprennent intuitivement comment interagir. Si vous utilisez les applications Articulate pour créer vos modules, les lecteurs de modules intégrés offrent aux apprenants des commandes de navigation intuitives. Cependant, si vous n’utilisez pas le lecteur intégré et que vous concevez votre propre navigation personnalisée (ou toute activité interactive personnalisée) vous devez vous assurer que vous créez une interface utilisateur intuitive.

Dans cet article, nous allons vous donner trois conseils importants à suivre lors de la conception de l’interface utilisateur de votre module afin de garantir une navigation fluide pour vos apprenants du début à la fin.

1. Indiquez clairement le chemin à suivre

Il devrait y avoir un unique chemin pour naviguer à travers votre module. Lorsque l’apprenant atteint la fin d’un paragraphe ou d’une diapositive, il ne devrait pas avoir à se demander ce qu’il doit faire, cela devrait être évident.

Un moyen simple de vous assurer que vos apprenants savent toujours quoi faire est d’ajouter des instructions à l’écran chaque fois qu’une action est requise. Quelque chose d’aussi simple que « Cliquez sur les onglets pour en savoir plus » peut faire l’affaire.

2. Appliquez les standards existants

En ce qui concerne la conception de l’interface utilisateur, il est préférable de ne pas réinventer la roue. Comme les apprenants accèdent aux modules e-learning via leur navigateur, ils s’attendent à ce que les modules se comportent comme les sites web. Si vous voulez que votre interface utilisateur soit intuitive, il est essentiel de s’appuyer sur les normes existantes au lieu d’essayer absolument d’être original.

Regardons ensemble certaines normes à garder à l’esprit lorsque vous concevez votre module.

Le texte

• Limitez-vous à 2 à 3 polices maximum :
  • 1 pour les titres
  • 1 pour le corps
  • 1 pour les boutons et autres éléments similaires 
• Évitez les polices fantaisistes et difficiles à lire. Pour plus de conseils sur la lisibilité de vos polices, consultez cet article : 5 conseils de mise en forme pour créer un module e-learning adapté aux dyslexiques.
• Réservez le texte souligné aux hyperliens.

Les boutons

• 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. 
• Ajoutez des états aux boutons afin qu’ils changent (en modifiant les couleurs ou leur taille) lorsqu’ils sont survolés ou cliqués.
• Rendre transparents les boutons verrouillés ou désactivés, au lieu de gris. Découvrez pourquoi ici : Pourquoi vous ne devriez pas griser les boutons désactivés (article en anglais).
• Utilisez les boutons radio pour les quiz avec une seule bonne réponse.
• Utilisez les cases à cocher pour les quiz avec plusieurs réponses correctes.

Les icônes

• Utilisez des icônes clairement reconnaissables. Par exemple, pour le menu.
• Pour plus de clarté, ajoutez une étiquette de texte (juste en dessous ou au survol) aux icônes.

Les mises en page

• Utilisez efficacement l’espace blanc. Découvrez comment faire ici : 3 astuces pour utiliser l’espace blanc dans vos modules e-learning.
• Placez le bouton Quitter dans le coin supérieur droit.
• Si vous concevez pour les utilisateurs mobiles, placez les boutons les plus fréquemment utilisés en bas afin qu’ils puissent facilement y accéder avec leurs pouces lorsqu’ils tiennent leur téléphone d’une main.

Ce n’est pas une liste exhaustive, mais quelques conseils simples à garder à l’esprit. Malheureusement, il n’existe pas de manuel officiel pour réussir son interface utilisateur, car les bonnes pratiques dépendent des besoins des utilisateurs. Si vous avez du mal à présenter quelque chose, effectuez une recherche rapide pour voir comment d’autres concepteurs ont fait. Si cela vous semble intuitif, appliquez les mêmes principes à votre module.

3. Restez cohérent 

Un autre principe important dans la conception d’interface utilisateur est la cohérence. Par exemple, les boutons de navigation, comme Précédent et Suivant, doivent toujours se ressembler et être au même endroit. S’ils sont bleus sur une diapositive et verts sur la suivante, cela peut dérouter les apprenants. Et s’ils se trouvent en haut d’une diapositive et en bas de la suivante, les apprenants risquent de perdre du temps à les chercher.

Un bon moyen d’obtenir un module cohérent est de définir des normes pour la conception de votre interface utilisateur dès le départ et de s’y tenir. Assurez-vous d’y inclure vos choix de couleurs, de polices, avec leur taille, le placement des objets et les fonctionnalités.

Le mot de la fin

Si vous suivez les principes de conception d’interface utilisateur décrits dans cet article, il y a de fortes chances que vos apprenants soient capables d’interagir intuitivement avec votre module. Mais la conception de l’interface utilisateur n’est que le début ! Si vous voulez vraiment que les apprenants aient une expérience optimale, vous voudrez aller plus loin et réfléchir à la conception de l’expérience utilisateur (UX). Pour en savoir plus, consultez cet article : Comment améliorer l’expérience d’apprentissage.

Suivez-nous sur Twitter et abonnez-vous au blog pour obtenir des conseils utiles sur tout ce qui concerne le e-learning. Si vous avez des questions ou des commentaires sur la conception de l’UI en e-learning, veuillez les partager dans les commentaires.