Comprendre la différence entre UI et UX

Souvent confondus et mal compris, l’UI et l’UX désignent deux expertises aux rôles et processus différents, mais pourtant tellement complémentaires !

Définitions

L’UX Design, pour « User Experience Design » fait référence à la conception de l’expérience utilisateur, alors que l’UI Design, pour « User Interface Design » renvoie au domaine du graphisme.

L’UX Design, qu’est-ce que c’est ?

Il s’agit de la totalité des effets de l’interaction entre un système et un utilisateur : l’UX est orientée activité / parcours et atteinte de l’objectif. Puisqu’elle se concentre sur l’activité, cette dernière doit être observée.

Le terme est souvent employé dans le monde du numérique, mais l’on retrouve l’UX dans bien des domaines : sites internet, applications smartphone, distributeurs bancaires, sonnettes, micro-ondes, tramways… Un exemple très parlant est celui des distributeurs de billets : il avait été constaté que les usagers oubliaient souvent de récupérer leur carte bancaire lors d’un retrait, ; en effet celle-ci leur était rendue une fois les billets délivrés. Pour pallier cela on inversa l’ordre des choses : les usagers étant concentrés sur le fait de recevoir leur argent, on décida de d’abord leur restituer la carte, et les billets sortaient désormais juste après ! De ce fait, on profita de l’attention de l’usager sur ses attentes principales pour que l’intégralité du procédé se déroule sans encombre 😊

L’UX englobe les principes, données et méthodes pour optimiser bien-être et performances globales dans l’utilisation d’un système : c’est un ensemble de règles et de principes qui fabriquent une expérience. Elle fait appel aux émotions, à la mémoire, et aux référentiels des utilisateurs.

L’UX dépend des usages, mais surtout du contexte.

Et l’UI Design ?

L’UI Design désigne la conception de l’interface utilisateur pour une application, un logiciel ou tout dispositif digital. Contrairement à l’UX, l’UI est exclusivement dédiée au monde du numérique. Complémentaire à l’UX, elle est orientée sur la perception, dans le but d’optimiser l’expérience utilisateur.

L’UI consiste à concevoir et disposer des éléments graphiques pour améliorer l’interface sur le plan visuel. On parle ici d’une action portée sur la sensibilité. L’objectif est de séduire l’utilisateur en lui donnant envie de se servir de l’interface et en lui apportant une expérience agréable. L’UI Designer collabore donc avec l’UX Designer, garant de l’expérience utilisateur, avec quilequel il élabore la version graphique de l’interface.

L’UI concilie esthétisme, et utilisabilité.

« En termes de design, il y a selon moi deux choses essentielles : la simplicité et la clarté. Un bon design naît de ces deux éléments. »

Lindon LEADERCRÉATEUR DU LOGO FEDEX

Et concrètement ?

Deux notions entrent en jeu !

Efficacité : C’est le degré d’atteinte d’un objectif. Les utilisateurs parviennent-ils à accomplir leur tâche ? ?

Efficience : C’est l’effort pour accomplir une tâche. Les utilisateurs effectuent-ils leur tâche facilement en mettant en œuvre un minimum de ressources ? ?

Qu’en déduire ? L’utilisabilité d’un système est le degré selon lequel un produit peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte d’utilisation spécifiée.

L’UI et l’UX sont complémentaires ; voici deux exemples pour mieux en prendre la mesure :

L’UI et l’UX sont complémentaires !

N’est-ce pas un non-sens que de faire un joli chemin s’il n’est pas emprunté ? ?

À l’inverse, comment donner envie à un marcheur d’emprunter un chemin peu engageant, quand bien- même ce dernier mène bien à la destination voulue ? ?

Une bouteille qui ressemble à une bouteille, c’est bien ! Mais ne peut-on pas améliorer le système en l’optimisant pour l’usage recherché ?

Leur utilité est la même mais en revanche elles n’ont ni la même ergonomie, ni la même façon d’être utilisées. Elles n’entraînent pas de ce fait le même retour d’expérience chez l’utilisateur en termes de ressenti et d’émotion. La bouteille de gauche, fonctionnelle, est moins adaptée à une expérience agréable d’utilisation que celle de droite, dont l’utilisation est bien plus simple. Avec une ouverture par le bas, son utilisation provoque moins de frustration et de peine dans l’accomplissement de l’objectif premier qui est celui de verser le ketchup. Avec ce design, fini de taper la bouteille de ketchup lorsqu’il n’en reste presque plus ! !

Qu’est-ce qu’une bonne UX ?

C’est celle que l’on ne remarque pas !

L’expérience utilisateur, si elle est assez fluide et agréable, devient invisible et permet à l’internaute/l’usager d’appréhender la lecture du contenu, de se concentrer sur le fond.

L’interface devient un support optimal de consultation et embarque l’utilisateur dans une expérience s’affranchissant de toute fioriture qui détournerait son attention.

Pour réaliser une interface la plus intuitive possible, il convient de s’appuyer sur les critères heuristiques de Bastien et Scapin. Ces derniers permettent de catégoriser les défauts de conception ergonomique, d’évaluer leur importance et de trouver des solutions pour les résoudre.

Parmi ces critères on citera par exemple :

La visibilité de l’état du système (toujours indiquer à l’utilisateur ce qu’il se passe),
La correspondance du système avec le monde réel (veiller à employer des visuels et comportements dont l’utilisateur connaît le sens),
La liberté et contrôle de l’utilisateur (laisser suffisamment de pouvoir afin de ne pas rester bloqué sur une action),
La prévention des erreurs (quoi de plus énervant qu’un message d’erreur intempestif ? L’important est de guider l’utilisateur pour que son parcours soit le plus fluide possible),
La flexibilité dans l’utilisation (s’adapter au niveau des usagers, tous les publics n’onayant pas la même maîtrise des outils numériques),
Un esthétisme et un design minimaliste pour atténuer la charge cognitive (la forme ne doit pas vampiriser le fond),
Apporter aide et documentation,
Etc.

Tous ces principes peuvent aussi être utilisés à des fins « malveillantes »; on appelle cela les dark patterns. Ce sont des interfaces soigneusement conçues pour tromper ou manipuler l’utilisateur. Dans quel but ? Pour collecter des données personnelles, augmenter le panier moyen sur un site de vente en ligne, augmenter artificiellement le trafic, faire souscrire à des offres, etc.

Un exemple concret : nous sommes persuadés que vous avez déjà rencontré cette petite croix (vraiment minuscule !) qui permet de fermer une publicité au lancement d’une application, et qui, au moment où vous souhaitez cliquer, se déplace toute seule de l’autre côté de votre écran. Et voilà, vous venez de cliquer sur la publicité et êtes redirigés ;-) Énervant n’est-ce pas ? Oui, mais tout est calculé !

En conclusion

Pourquoi est-ce important de soigner son UX et son UI ?

Prendre en compte les attentes et les habitudes des utilisateurs est primordial. Qui a envie de remplir 5 pages de formulaire pour passer une commande à 10€ ?

Le contexte d’utilisation est également un critère majeur à prendre en considération (on ne pense pas de la même manière une application métier et un portail patient !).

Cette démarche est au coeur de la conception des solutions de Maincare : de l’analyse à la construction en passant par la réflexion design et ergonomique, sans oublier l’amélioration continue.
Le tout pour garantir une totale adéquation avec les besoins de nos utilisateurs finaux.

Tommy BoucherotRESPONSABLE STUDIO DE CRÉATION DE DIGITAL INITIATIVE
En savoir plus sur les solutions proposées par Digital Initiative