La différence entre l’UI et l’UX

UI et UX sont deux  accronymes qui signifient :

  • UI, User Interface en anglais, l’interface utilisateur en français
  • UX, User eXperience en anglais, l’expérience utilisateur en français

Deux termes différents dont on imagine la différence rien qu’en lisant les mots. Une interface est différente d’une expérience. Mais lorsqu’on parle de digitale, l’interface est le point de contact de l’utilisateur et de ce fait l’expérience dépend de l’interface. La frontière s’amenuise.

De la vue…

Le Larousse donne plusieurs définitions d’une interface selon le contexte. Je retiens la suivante :

Limite commune à deux systèmes, permettant des échanges entre ceux-ci.

Dans le cas d’une application, l’interface est donc ce qui fait le lien entre l’utilisateur et l’action attendue. De quoi s’agit-il ? C’est le  clavier, la souris, et ce que vous voyez sur l’écran de votre ordinateur, smartphone ou tablette.

Une interface agréable c’est une belle interface (toujours subjectif, attention), pratique et facile à comprendre pour faire le lien entre l’utilisateur et le logiciel, avec une logique d’affichage, un style propre.

L’interface joue donc sur le sens de la vue, avec un peu de toucher pour le clavier et la souris.

Ca, c’est l’UI.

… aux 5 sens

Concernant l’expérience, il ne s’agit pas ici de tester quoi que ce soit, mais de vivre, de ressentir quelque chose.

Pour une application l’UX c’est ce que l’utilisateur va ressentir en l’utilisant, en faisant telle action.

Un exemple simple : un jeu.
L’interface c’est le style graphique, les interactions avec le jeu.
L’expérience, c’est ce que l’utilisateur va ressentir pendant des mises en situation : lorsqu’il a gagné ou perdu, lorsqu’il fait évoluer son personnage, lorsqu’il est accepté dans un groupe de joueurs, lorsqu’il découvre un nouveau monde, etc.

L’UX va faire appel à l’émotionnel, jouer sur nos 5 sens : la vue, l’ouïe, l’odorat, le goût et le toucher.

Avec un écran pour interface, il semble difficile de faire fonctionner nos différents sens. Mais notre outil qu’est le cerveau n’a pas les limites techniques d’un ordinateur, qui aujourd’hui va surtout se limiter à faire fonctionner notre vue et notre ouïe. Il possède un pouvoir de suggestion.

La suggestion c’est faire dire à notre cerveau que c’est telle odeur, tel goût, alors que nos sens ne sont pas stimulés. Jouer sur des habitudes pour lui faire imaginer, lui rappeler des souvenirs, ou biaiser l’interprétation que notre cerveau va faire d’une situation (pour la vue, pensez aux illusions d’optiques).

C’est ce qui se passe lorsque vous lisez un roman. Je vais tenter d’en faire l’illustration.

C’est le matin, il fait encore nuit. Vous êtes bien calé sous la couette. Les yeux encore fermés, quelques bruits montent depuis la cuisine. Vous ouvrez lentement les yeux, puis alerté par une légère odeur de pain grillé, vous vous décidez à vous lever. Dans l’escalier menant jusqu’à votre petit déjeuner, vous imaginez déjà votre tartine de pain grillée et nappée de beurre doux et de confiture de fraise, avant de la tremper dans ce délicieux café tout juste coulé de la cafetière héritée de votre grand-mère.

Je ne suis pas un grand littéraire,  j’espère avoir réussi mon effet. Que ressentez-vous à la lecture de ces quelques mots ? Cela vous rappelle-t-il des souvenirs ?

Pour ma part c’est une madeleine de Proust. Je sens cette odeur qui me rappelle mon enfance, je goûte ces tartines.

Ce ne sont pas que des mots que mes yeux voient, c’est une expérience qui rappelle à mon cerveau ce que mon sens du goût et mon odorat ressentaient. Ces souvenirs ravivent mes sens en me faisant revivre mon expérience.

La métaphore du cookie

Si je n’ai pas été assez clair dans mes explications, voici l’explication en images. Ca, c’est l’UI :

Cookie

Et ça, c’est l’UX :

via GIPHY

Partager cet articleTweet about this on TwitterShare on FacebookShare on Google+Email this to someone

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Un projet, des idées, des envies, des questions? Contactez-nous