Le rôle de la psychologie dans la conception UI/UX en immersive learning

Article écrit par Mira Hajj Hassan et Yves Bonis

Imaginez entrer dans un magasin où tout est parfaitement organisé, facile à trouver et où vous vous sentez bien. Vous profitez de l’expérience, vous n’avez aucune difficulté à trouver ce que vous cherchez, vous découvrez même des nouveautés et vous repartez probablement satisfait de vos achats. Si tout cela vous a paru fluide et agréable, c’est parce qu’un travail en amont a été fait sur vos attentes et vos fonctionnements préférés. La même idée s’applique à la conception numérique. 

Une UI/UX (User Interface/User Experience) efficace consiste à comprendre comment les gens pensent, ressentent et se comportent. Lorsque les concepteurs pédagogique travaillent sur leur interface VR, ils doivent maîtriser ces concepts. Ainsi, ils peuvent créer des scénarios et des expériences dans Speedernet Sphere avec lesquels les apprenants aiment interagir.

Dans le domaine de la conception d’interface, l’embodiment est déclenché grâce à des éléments matériels avec lesquels nous interagissons physiquement. Il est permis car les objets proposés sont crédibles dans l’environnement virtuel. Ils sont considérés par notre cerveau comme logiques et parce que nous acceptons leur présence, notre cerveau construit des perceptions sensorielles et corporelles adéquates.

CRÉER DES EXPÉRIENCES IMMERSIVES INCARNÉES

Maintenant que cela est posé, voyons comment un concepteur peut créer des expériences incarnées. Margaret Wilson a soulevé dans une étude publiée en 2002 le manque d’explications concrètes pour créer l’interface qui permettra une bonne immersion en réalité virtuelle. 

En réponse à ce problème, Van Rompay et ses collègues ont proposé en 2015, un modèle comprenant quatre types d’embodiments. S’ils sont présents tous les quatre, ils permettent une interaction optimale entre l’utilisateur et l’expérience de VR. Cela dit, il est possible d’avoir un état d’incarnation intéressant même s’il en manque un ou plusieurs (par exemple si le support de diffusion ne permet pas un habillage sonore ou si le public est malentendant).

Dans la suite de cet article, nous allons nous concentrer sur deux des quatre types d’embodiment, ceux qui se focalisent sur la perception visuelle.

Mais avant cela, nous allons définir ce qu’est la conception d’une interface utilisateur (UI/UX).

QU’EST-CE QUE LA CONCEPTION UI/UX ET QUELLE EST SON IMPORTANCE ?

La conception UI/UX fait référence au processus de création d’interfaces utilisateur (UI) et d’expériences utilisateur (UX) pour des produits numériques tels que des sites Web et des applications. Ce terme est également pertinent pour des modules de réalité virtuelle.

La conception UI se concentre sur l’apparence du module, garantissant qu’il est visuellement attrayante et facile à utiliser (on parle d’affordance en design). La conception UX, quant à elle, concerne l‘expérience globale des utilisateurs lorsqu’ils interagissent avec le “produit”, dans le but de le rendre efficace, agréable et convivial. Ainsi, la conception UI et UX vise à créer des expériences numériques intuitives et engageantes. Dans une étude de 2023, Hemidli prouve que la conception UI/UX joue un rôle crucial dans le développement de produits numériques car elle a un impact direct sur la façon dont les utilisateurs interagissent avec eux.

Nous pouvons tirer de l’étude l’enseignement suivant : une conception UI/UX réussie peut contribuer à accroître la satisfaction et l’immersion des apprenants, entraînant ainsi un engagement amélioré. Nous vous recommandons donc de considérer la conception UI/UX de vos expériences VR comme un aspect essentiel de vos projets immersifs (nous c’est ce qu’on fait !).

COMPRENDRE LES BESOINS DES UTILISATEURS

Imaginez utiliser une application qui semble avoir été conçue spécialement pour vous. Tout vous paraît clair, vous savez où cliquer, comment atteindre vos objectifs… Tout cela est dû à une fine connaissance, de la part des concepteurs et designers, des principes fondamentaux de la psychologie cognitive et comportementale. 

En comprenant ce qui maintient l’intérêt des utilisateurs, les concepteurs peuvent utiliser des éléments graphiques qui leur permettent de s’orienter et de profiter de l’expérience avec le moins de charge mentale possible.

Plus ce design est performant et moins l’utilisation de l’expérience est coûteuse en énergie (pour rester concentré, pour comprendre les attendus etc.) pour eux. On baisse donc la charge mentale pour faciliter et augmenter l’engagement (Zhang et al. 2023).

AMÉLIORER LA CONVIVIALITÉ

Le deuxième aspect sur lequel la psychologie peut vous aider à améliorer vos productions est la convivialité. Cela consiste à rendre une production facile et agréable à utiliser en créant des interfaces intuitives. Par exemple, placer des boutons importants là où les utilisateurs regardent naturellement ou maintenir une cohérence dans la conception, rendent les interactions naturelles et faciles, améliorant ainsi la convivialité globale et donc là encore, la baisse de la charge mentale de l’utilisateur.

PRINCIPES PSYCHOLOGIQUES DE LA CONCEPTION UI/UX

La psychologie Gestalt traite de la capacité de notre cerveau à relier des éléments disparates et à les interpréter comme des formes complètes. Un exemple classique est celui-ci : depuis des millénaires, lorsque les humains voient un amas d’étoiles, ils perçoivent des constellations plutôt que des étoiles individuelles.

Notre cerveau a donc la capacité de manipuler notre perception du monde et c’est cela que traite la psychologie Gestalt à travers 6 principes que nous allons voir à présent.

Ils vous permettent, lorsque vous les utilisez dans la conception UI/UX, de créer des designs harmonieux et organisés. 

Proximité

Notre cerveau a tendance à considérer que les éléments proches les uns des autres sont liés. Par exemple, le regroupement de différents boutons indique clairement qu’ils sont connectés. C’est ce qui préside par exemple à la construction des barres de tâches dans votre logiciel de conception de contenus en VR préféré 😉.

Voici une illustration du principe de proximité. A gauche, un amas d’éléments indistincts. A droite, une répartition que le cerveau “classe” automatiquement en trois blocs cohérents.

Similarité

Les éléments qui se ressemblent sont perçus comme faisant partie d’un groupe. Lorsque 2 objets se ressemblent, l’esprit tend à les percevoir comme un ensemble. Ainsi, dans l’image suivante, vous pouvez distinguer un losange fait de cercles et entouré de triangles par effet de similarité.

L’utilisation de la couleur permet soit de rassembler soit de distinguer les éléments d’un ensemble. Ainsi, la cohérence graphique d’une expérience repose sur la répétition d’une couleur pour les éléments qui remplissent la même fonction ou qui servent le même but.  A contrario, l’accident graphique permet de mettre en exergue un élément au sein de l’ensemble.

C’est pour cette raison que les extincteurs sont rouge vif dans les lieux publics par exemple. Pour les distinguer et souligner leur importance dans le décor.

Continuité

Nos yeux suivent les lignes et les courbes, presque par réflexe. Ainsi, dans un lieu réel ou virtuel), marquer le sens de la déambulation permet de guider la progression spatiale de l’apprenant.

C’est la même mécanique qui est utilisée dans les transports publics lorsque des marquages au sol guident les flux de voyageurs. Ce dispositif graphique “simple” permet de fluidifier et d’accélérer la circulation des usagers.

L’idée est tout à fait transposable dans vos expériences de réalité virtuelle, que vous les destiniez à sensibiliser de grands débutants ou que vous deviez former à des procédures d’évacuation d’urgence par exemple.

Clôture

Face à un schéma partiel ou à une image incomplète, notre cerveau comble les “trous” pour reconstituer une image complète. L’utilisation de formes ou de contours incomplets peut donc rendre les conceptions attrayantes et intuitives.

Dans l’image ci-dessous et de façon tout à fait naturelle, le cerveau perçoit d’abord dans la figure de droite, un triangle blanc, avant de se rendre compte, si on fait l’effort d’analyser la forme, qu’il n’existe factuellement pas.

A noter que l’image est attrayante mais ne constitue pas une source de charge mentale pour l’observateur tant qu’on ne cherche pas à décrypter l’image.

Le principe de symétrie

Le biais de symétrie intervient lorsque 2 éléments symétriques sont perçus comme un groupe unifié, notamment dans les dispositions symétriques en miroir par rapport à un axe vertical. Les formes qui se reflètent sont alors regroupées par paires. Cet effet est parfois tellement fort que le regroupement de formes voisines vient contrecarrer la loi de la proximité vue plus haut.

Le principe figure-fond

L’esprit sépare naturellement un objet de son fond (background) L’œil différencie un objet de l’espace qui l’entoure, en anglais figure & (back)ground . Sur l’image ci-dessous, l’exemple très connu du vase d’Edgar Rubin, on distingue deux visages qui se regardent sur un fond blanc, mais aussi un vase blanc sur un fond noir. 

L’œil fait un ajustement d’une représentation à l’autre et peine à percevoir les deux en même temps. Le contraste joue bien sûr un rôle important dans cette construction. De notre côté, nous chercherons bien sûr à faire ressortir un objet sur son fond, sans chercher à créer une illusion d’optique. Nous profiterons simplement de la capacité du cerveau à isoler un sujet de son “background”.

THÉORIE DE LA CHARGE COGNITIVE

Tout comme les ordinateurs, le cerveau humain possède une capacité de traitement et de mémoire. Forcer le cerveau humain en lui apportant un excès d’informations peut frustrer l’utilisateur et l’amener à abandonner les tâches qu’il effectue Letizia (2023). La charge cognitive fait référence à l’effort mental nécessaire pour utiliser un produit, par exemple digital. Plus il faut d’effort, plus l’expérience est considérée comme difficile à utiliser. 

Pour réduire la charge cognitive vous pouvez :

• Simplifier la conception : gardez les interfaces propres et simples. Évitez le désordre.
• Utiliser des modèles familiers : respectez les conventions de conception que les utilisateurs connaissent déjà. Concevoir avec des signifiants appropriés (on parle “d’affordance” quand l’outil ou l’indication suggère d’elle-même sa fonction) réduit la charge cognitive et maximise la convivialité.

Quelqu’un comprend-il la fonction de l’icône éclair dans cette succession de pictogrammes ? Non bien sûr. Autant les autres sont très habituels, autant ce visuel d’éclair n’évoque aucune fonction logique. 

Pour qu’un utilisateur puisse saisir rapidement et sans réfléchir l’interaction potentielle, il est parfois nécessaire de communiquer sur cette interaction et donc de lui indiquer via une étiquette/ un label/ une inscription ce qu’elle signifie. 

Fournissez des instructions claires : si vous devez former les utilisateurs à travers des processus complexes, accompagnez leurs actions étape par étape. N’ayez pas peur de leur donner les détails. 

Cela dit, si vos apprenants ont la possibilité de répéter l’expérience plusieurs fois, pensez à leur donner le moyen d’accélérer le processus tutoriel voire de le passer afin d’éviter la lassitude.

PSYCHOLOGIE DES COULEURS POUR L’UI/UX

Les couleurs jouent un rôle important dans la conception de l’interface utilisateur. Le choix d’une palette de couleurs pour les éléments de conception, tels que les boutons ou les appels à l’action, peut avoir un impact significatif sur le comportement, les émotions et l’expérience de l’utilisateur. Par exemple, le bleu peut être apaisant, tandis que le rouge peut évoquer l’urgence ou l’excitation.

L’un des rôles essentiels des concepteurs d’interface utilisateur est de comprendre les perceptions des utilisateurs et d’en tirer le meilleur parti pour créer une expérience précise et agréable. C’est là que les couleurs influencent considérablement le processus de conception et les choix :

• Choisissez judicieusement les couleurs : utilisez des couleurs qui correspondent au message ou à l’action que vous souhaitez transmettre.
• Tenez compte de l’accessibilité : veillez à ce que les combinaisons de couleurs soient faciles à lire et à distinguer pour tout le monde, y compris pour les personnes qui ont des déficiences visuelles.

En comprenant et en appliquant ces principes psychologiques à l’UI/UX de vos modules immersifs, vous pouvez créer des expériences non seulement fonctionnelles mais également intuitives et agréables pour les utilisateurs.

Et vous, y’a-t-il d’autres principes psychologiques que vous mobilisez lorsque vous construisez vos expériences d’immersive learning ? Dites-le nous en commentaires !

Photo de Tima Miroshnichenko