Les principes psychologiques de base dans l’UX design

Home / Blog / UX / Les principes psychologiques de base dans l’UX design
UXLa psychologie
en UI/UX design

Je démarre la rédaction d’articles sur l’UX design en abordant les principes psychologiques de base. Comprendre comment un design est perçu, permet d’orienter la conception d’une interface et optimiser l’expérience utilisateur.

Si dessous, je vous présente des principes de design importants. Commençons par l’effet Von Restorff.

L’effet Von Restorff

L’effet Von Restorff (ou l’effet d’isolation, nommé d’après la psychiatre Hedwig von Restorff.), est assez simple à comprendre : lorsque plusieurs éléments similaires sont présents, on va retenir celui qui diffère des autres.

C’est la raison pour laquelle les call-to-action sont mis en valeur dans une application : couleur, forme, emplacement différent…

Exemple de l'effet Von Restorff
Exemple – Effet Von Restorff

Tout simplement, on souhaite que l’utilisateur puisse faire la différence entre un bouton simple et un CTA, de manière à l’inciter à cliquer.

Sur l’exemple suivant, deux versions d’une page produit sur une boutique en ligne « relativement » connue. Pour l’exemple, j’ai volontairement modifié la couleur du bouton « Ajouter au panier » (orange à la base), de manière à uniformiser avec la couleur du logo et le bouton du dessous « Ajouter à mes préférés ». D’après vous, quelle version incite le plus l’utilisateur à ajouter un produit dans son panier ?

En nous basant sur l’effet Von Restorff la réponse est plutôt évidente… mais on peut toujours faire de l’A/B testing pour en avoir le cœur net !

Exemple CTA, couleurs différentes
Exemple – Couleurs différentes CTA sur une boutique en ligne

L’effet de position sérielle

Désigne la propension d’un utilisateur à mieux mémoriser le premier et dernier élément appartenant à une série.

C’est pourquoi de nos jours, de plus en plus d’applications mobiles abandonnent le menu burger pour une barre de navigation en haut ou en bas de l’écran. Les boutons importants comme le retour à l’accueil de l’application ou bien les paramètres de son profil, sont souvent situés à gauche (premier élément) et à droite (dernier élément) de la barre.

Sur cet exemple tiré de l’application Twitter, l’accueil est situé en premier alors que le bouton d’envoie de message est situé à droite :

Exemple écran Twitter pour illustrer une position sérielle
Exemple – Twitter, position sérielle des éléments de navigation

A noter que le bouton pour tweeter est idéalement situé en bas à droite de l’écran, dans une zone facile d’accès pour le pouce d’une main droite.


La charge cognitive

La théorie de la charge cognitive explique les échecs ou les réussites des personnes essentiellement en activité d’apprentissage mais aussi en activité de résolution de problème.

Dans un contexte UX, ce sont toutes les pensées que l’on va mettre en oeuvre pour réaliser une tâche spécifique. Lorsque l’on est confronté à une interface graphique qui va nous demander d’interagir avec elle, l’utilisateur est bel et bien dans une activité d’apprentissage et de résolution des problèmes.

La théorie de la charge cognitive en trois types :

  1. La charge intrinsèque
  2. La charge extrinsèque
  3. La charge cognitive essentielle (germane cognitive load)

Je vais m’attarder ici sur les types « intrinsèque » et « essentielle » qui sont plus facilement applicables dans un contexte UX.


La charge cognitive intrinsèque

Cette théorie désigne la difficulté que l’on peut rencontrer face à une instruction donnée . C’est pour cela que les messages rencontrés lorsque l’on navigue sur une application jouent un rôle capital dans l’expérience utilisateur.

Par exemple, sur une application mobile, lorsque l’on a un écran vide (pas d’éléments enregistrés par exemple), il faut inciter l’utilisateur à accomplir sa tâche. Ces instructions doivent être courtes et faciles à comprendre :

  • « Page 404 – Cette page ne peut être trouvée sur le serveur – Retour à l’accueil »
  • « Quoi de neuf ? » (Twitter)
  • « Exprimez-vous », « Ecrivez quelque chose » , « Commencez une vidéo en direct » (Facebook)
  • « Réservez des logements uniques et vivez là-bas comme des locaux. » (Airbnb)
  • « Identifiez votre véhicule afin, de trouver la liste des pièces compatibles » (Oscaro)

Des phrases courtes, qui ne laissent pas de place aux doutes ! Rien ne vous empêche aussi d’avoir de l’humour


La charge essentielle

La charge essentielle permet l’intégration de connaissances en mémoire à long terme, sous formes de schémas mentaux.

L’intérêt d’utiliser des « design patterns » (patrons, modèles de conception) en UX desing vient du fait qu’ils sont pensés pour provoquer chez l’utilisateur une action par défaut. Pour ce dernier, il va donc être plus facile de reconnaître et apprendre quelque chose de nouveau au sein d’une interface puisqu’il va interagir dans un environnement qu’il comprend et maîtrise déjà.


La loi de Hick

La loi de Hick est surement le principe le plus connu avec la psychologie de la forme (théorie de la Gestalt).

C’est aussi une loi très simple à comprendre et à utiliser en UX design. La loi de Hick stipule que le temps pris par une personne pour prendre une décision, dépend du nombre de choix disponible. Donc si ce nombre augmente, le temps alloué à cette action va lui aussi augmenter (logique).

Pour illustrer la loi de Hick, voici un exemple parlant, les lites à puces :

Illustration de la loi de Hick avec les listes à puces
Exemple – Loi de Hick

La loi de proximité

La loi de proximité est connue en UX design. Elle stipule le fait que plus des objets sont proches les uns des autres, plus on a tendance à les considérer comme appartenant au même groupe.

En clair, notre cerveau a plus de facilité pour associer des éléments proches, plutôt que des éléments éloignés entre eux. Cela traduit simplement le fait que l’homme possède une propension naturelle à organiser et regrouper des objets.

Illustration de la loi de proximité
Exemple – Loi de proximité

Parmi ces 72 cercles, on peut définir 4 groupes en nous basant sur la distance entre les cercles. Un groupe de 36 et 3 groupes de 12 cercles à droite de l’image. Cette loi est à mon sens capitale lorsque l’on conçoit une interface : cela permet à l’utilisateur de définir des groupes d’objets et lui facilite ainsi la compréhension d’une interface.


N’hésitez pas à m’indiquer en commentaires si vous connaissez d’autres lois psychologiques pouvant être appliquées à de l’expérience utilisateur.

Article original : https://blog.marvelapp.com/psychology-principles-every-uiux-designer-needs-know/

Laisser un commentaire

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