Usability, User Experience (UX) et User Interface (UI) : comment les différencier ? - EXIT Studio

Usability, User Experience (UX) / Expérience Utilisateur et User Interface (UI) / Interface Utilisateur ; des termes qui ne vous disent peut-être rien et que même les individus issus du web ont du mal à distinguer. Cet article tentera donc – tant bien que mal – de s’atteler à cette tâche avec une série d’exemples ayant pour but de bien vous faire saisir la nature de ces trois concepts.

Usability, User Experience (UX) et User Interface (UI) : comment les différencier ? - EXIT Studio

Réussir à distinguer Usability, User Experience (UX) et User Interface (UI)

De manière très simplifiée, l’utilisabilité (également appelée « aptitude à l’utilisation) regroupe à la fois l’Expérience et l’Interface Utilisateur (Usability = UX et UI).

Selon la norme ISO 9241-11 :

« L’utilisabilité est définie comme le degré selon lequel un produit peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité (le produit permet à ses utilisateurs d’atteindre le résultat prévu), efficience (atteint le résultat avec un effort moindre ou requiert un temps minimal) et satisfaction (confort et évaluation subjective de l’interaction pour l’utilisateur), dans un contexte d’utilisation spécifié ».

L’Usability est ainsi assez proche de l’Ergonomie.

Cela se complexifie lorsqu’il s’agit de différencier l’UI de l’UX :

 “A User Interface (UI) design is the part of the product that faces the user when he looks at the site. The User Experience (UX) is how they feel when they look at the site […]”.

Traduction :

L’interface utilisateur est la partie du produit qui fait face à l’utilisateur lorsqu’il regarde le site. L’expérience utilisateur est ce qu’éprouve l’utilisateur lorsqu’il regarde le site.

À ce titre, cette définition de l’UX / User Experience ou Expérience Utilisateur, m’a parue particulièrement adéquate :

“User Experience (UX) involves a person’s behaviors, attitudes, and emotions about using a particular product, system or service. User Experience includes the practical, experiential, affective, meaningful and valuable aspects of human–computer interaction and product ownership. Additionally, it includes a person’s perceptions of system aspects such as utility, ease of use and efficiency. User Experience may be considered subjective in nature to the degree that it is about individual perception and thought with respect to the system. User Experience is dynamic as it is constantly modified over time due to changing usage circumstances and changes to individual systems as well as the wider usage context in which they can be found”.

Traduction :

L’UX implique le comportement d’un individu, ses attitudes ainsi que ses émotions, au moment de l’utilisation d’un produit, d’un système ou d’un service spécifique. L’UX inclut les pratiques résultant de l’expérience, de l’affectif et du significatif dans de nombreux aspects de l’interaction homme – machine, mais également au sein des propriétés d’un produit. De plus, cela inclut les perceptions d’une personne vis-à-vis des aspects d’un système, tel que son utilité, sa facilité d’utilisation et son efficacité. L’UX peut être considérée de nature subjective puisqu’elle touche à la perception et à la réflexion individuelle. L’UX est dynamique en ce qu’elle se retrouve constamment modifiée au cours du temps, de par les circonstances d’usage et le contexte dans lequel elle peut évoluer.

Tout comme cette définition de l’UI / User Interface ou Interface Utilisateur :

“The user interface […] is the space where interactions between humans and machines occur. […] The design considerations applicable when creating user interfaces are related to or involve such disciplines as ergonomics and psychology”.

Traduction :

L’UI, dans le domaine du design, est l’espace où les interactions entre l’homme et la machine ont lieu. Les considérations prisent en compte au moment de la conception graphique de ces interfaces utilisateurs sont intimement liées à l’ergonomie et à la psychologie.

Usability, User Experience (UX) et User Interface (UI) : comment les différencier ? - EXIT Studio

L’UI est à l’UX ce que la planche de surf est à la vague

Métaphoriquement parlant, nous pourrions dire qu’une bonne expérience utilisateur, c’est l’art de savoir glisser sur la vague, aussi simplement et naturellement que possible. L’interface utilisateur est la planche de surf en elle-même, sa forme et sa conception faisant en sorte qu’elle glisse de manière optimale à la surface de l’eau, la cire appliquée préalablement dessous améliorant la glisse et les nervures du dessus assurant le maintien du surfer.

Concrètement, l’ensemble participe d’une bonne Expérience Utilisateur. C’est grâce à l’optimisation de la planche (sa forme, sa coupe, le type de peinture, etc.) à la cire passée dessous et au nervures du dessus – qui offrira une certaine stabilité au surfer – qu’il est possible de glisser aussi naturellement et efficacement sur la vague. L’Interface Utilisateur (UI) participe donc de manière primordiale à l’Expérience Utilisateur (UX) tout en en faisant partie. Si UX et UI sont bien deux choses distinctes, elles restent intimement imbriquées l’une à l’autre.

Usability, User Experience (UX) et User Interface (UI) : comment les différencier ? - EXIT Studio

Appliquons désormais ces idées à l’univers du numérique (le web, le mobile, l’interactif). L’Interface Utilisateur (UI) serait constituée d’une série de boutons ainsi que de leur design ; l’Expérience Utilisateur (UX) indiquera que, lorsque l’on clique ou appuie (tactilement, à l’aide du doigt) dessus, ce dernier doit s’enfoncer. Mais pourquoi ? Parce que face au design d’un bouton ayant une ombre portée, notre instinct naturel nous laisse à penser qu’il va s’enfoncer une fois que nous aurons appuyé dessus. Si le curseur de votre souris fini par simplement s’écraser dessus sans que rien ne se passe, nous éprouvons une sorte de déception. Votre expérience utilisateur s’en retrouve biaisée parce que ce qu’il se passe lorsque vous cliquez sur ce bouton va à l’encontre de votre instinct, de ce que vous imaginez qu’il doit se passer.

Le passage du Skeuomorphism au Flat Design

Le passage du Skeuomorphism au Flat Design a cependant pas mal changé la donne. Beaucoup de sites ne proposent désormais plus de boutons à ombre portée qui s’enfoncent virtuellement lorsque l’on clique dessus. Cela reste une question de conception graphique mais également car, depuis 10 ans, les internautes ce sont habitués à l’interaction avec ces boutons. De sorte que leur donner l’apparence d’un bouton physique n’est plus nécessaire pour que l’internaute comprenne qu’il est possible de cliquer dessus. L’arrivée du minimalisme ainsi que la tendance du web a chercher à rendre le design et les interfaces toujours plus efficiente, a amené à l’abandon du Skeuomorphism et à l’avènement du Flat Design. L’illustration présentée ci-dessus sert principalement à vous faire comprendre ce que signifie l’Expérience Utilisateur (UX) dans le domaine du web, et à le différencier de l’Interface Utilisateur (UI) constituée par le bouton et son design.

Usability et Expérience Utilisateur (UX) : plus d’intuitivité pour améliorer naturellement efficacité, efficience et satisfaction

À ce titre, l’Expérience Utilisateur (UX) et les termes tels qu’intuitivité ou « user-friendly » sont souvent employés de concert. Dans l’univers de la conception de produit et de l’interactivité, l’intuitivité liée à l’Expérience Utilisateur (UX) laisse à penser qu’un produit doit pouvoir être utilisable sans manuel d’utilisation. Si cela n’est pas rendu possible par tous les appareils (un four multifonction ou un smartphone dernière génération seront plus difficilement « intuitivement » utilisables qu’un simple grille-pain), tendre vers cet idéal améliorera de manière significative l’Expérience Utilisateur (UX). Ainsi, les termes « efficacité », « efficience » et « satisfaction » que l’on retrouvait dans la définition de l’Usability (Ergonomie) font partie intégrante d’une bonne Expérience Utilisateur (UX). Dans le domaine du web / mobile :

  • Optimiser l’architecture de l’information du site en diminuant le nombre de clics permettant d’atteindre l’information recherchée ;
  • Travailler l’intitulé des liens sur la page d’accueil afin que lorsque l’internaute entre dans une page, il n’ait pas à revenir en arrière car celle-ci ne contient pas l’information qu’il pensait y trouver ;
  • Optimiser le contenu textuel, de sorte que l’internaute y retrouve l’information recherchée, ne soit pas trop vite fatigué par une lecture sur écran (bien différente d’une lecture sur papier) et puisse parcourir rapidement (et en diagonale) l’article, tout en saisissant de quoi ce dernier traite ;
  • Indiquer dans chaque champ d’un formulaire de contact, quelle information doit y être insérée ;
  • Etc.

Dans le domaine des produits et du packaging :

  • Optimiser l’interaction avec le produit en diminuant (autant que possible) la complexité d’utilisation de l’appareil ;
  • Si des icônes / images sont employées, que celles-ci soient éloquentes et permettent de saisir immédiatement de quoi il retourne (par exemple : le fait d’utiliser un engrenage / un rouage pour indiquer qu’il s’agit des paramètres | utiliser un thermomètre pour indiquer qu’il s’agit d’un indicateur de température) ;
  • Mettre à disposition les « outils » complémentaires à son utilisation (par exemple : un gobelet doseur d’eau avec un cuiseur vapeur | une télécommande avec un lecteur dvd).
  • Etc.

Ainsi, en améliorant l’intuitivité (caractère de ce qui est intuitif, qui peut être compris par intuition) d’un produit / d’un site, on augmente naturellement son efficacité ainsi que son efficience, et la satisfaction de l’utilisateur / l’internaute s’en retrouve améliorée. Des tas de facteurs peuvent influencer la manière avec laquelle un internaute va se sentir lorsqu’il arrive sur un site et le parcourt / lorsqu’il utilise un nouveau produit ou appareil. Il est ainsi important de pouvoir s’assurer que le site / le produit utilise à bon escient ces facteurs externes en les convertissant à son propre compte.

Usability, User Experience (UX) et User Interface (UI) : comment les différencier ? - EXIT Studio

L’UI et l’UX appliqués aux packagings produits

La question de l’UI et de l’UX est aussi importante au moment d’envisager une application ou un site web, qu’au moment de la création d’un format ou d’un packaging. L’exemple du quotidien « Metro » et du packaging « Prince de Lu » vous permettront d’y voir plus clair quant à la pertinence et l’importance de tenir compte de l’utilisateur cible ainsi que de son contexte d’utilisation, au moment de concevoir le design d’un emballage.

Etude de cas : le format du quotidien « Metro »

Le journal Metro est un quotidien gratuit, mis à la disposition des navetteurs dans toutes les gares du pays. Bien que récemment, les grands quotidiens nationaux aient revus leur format pour rendre la lecture plus aisée :

« Afin de reconquérir le lectorat, de nombreux éditeurs de presse réduise aujourd’hui le format de leurs titres. Cette tendance est surtout visible dans la presse magazine mais se décline également en presse quotidienne. […] Moins de papier, moins de coût, facilité de transport et de lecture sont autant d’avantages clefs de cette stratégie ».

Jusqu’il y a peu, le Metro était l’un des seuls journaux à disposer d’un format de plus petite taille (Format Tabloïd A3). Pourquoi ? Considérant son public cible (les navetteurs) et son contexte d’utilisation (en déplacement, dans le train, soit debout, soit assis dans un espace limité), il leur fallait mettre à disposition un format plus facile à manipuler. Lire Le Soir (dans son ancien format) dans le train ? Vous imaginez vous déplier un journal de 50 x 30 cm en 7 colonnes dans le train ? Difficile à réaliser et peu pratique à lire. Dans ce cas de figure, l’Interface Utilisateur (le quotidien papier en lui-même) et l’Expérience Utilisateur (un format adapté à une lecture par des navetteurs en transport en commun) sont des éléments primordiaux qui convertissent des facteurs externes en expérience bénéfique (laquelle fidélisera ses lecteurs mais lui permettra également d’en acquérir de nouveaux).

Brussels January 11, 2007 - METRO Newspaper in the Thalys Train SNCB SNCF REPORTERS©Jean-Michel Clajot nmbs

Etude de cas : le packaging du « Petit Prince de Lu »

L’exemple de la modification de packaging du « Prince du Lu » en est un autre exemple flagrant. Des années durant, le packaging de cette marque de biscuits fourrés au chocolat resta inchangé. Il présentait pourtant de nombreux inconvénients – souvent pointés du doigt par ses milliers de consommateurs – lesquels participaient à déprécier l’Expérience Utilisateur (UX) :

  • Difficulté à atteindre les derniers biscuits du paquet ;
  • Difficulté d’ouverture du paquet avec le premier biscuit qui avait tendance à se briser ;
  • Problème de miettes ;
  • Etc.

« Depuis septembre 2013, l’emballage cylindrique se voit équipé d’un nouveau système d’ouverture / fermeture repositionnable, qui se veut plus pratique. Placé debout, le paquet fonctionne maintenant comme un tiroir à biscuits qui s’ouvre et se ferme grâce à une languette sur l’avant bas du paquet, avec un accès direct au produit ».

L’émission « coûte que coûte » sur le Prince de Lu (datant de mai 2013) montre comment une étude menée auprès de ses consommateurs cibles (les mères de familles) a permis de revoir le packaging (l’Interface Utilisateur) dans le but d’améliorer l’Expérience Utilisateur du produit.

Usability, User Experience (UX) et User Interface (UI) : comment les différencier ? - EXIT Studio

En conclusion – Usability, UX et UI : des concepts interconnectés

Expérience Utilisateur (UX) et Interface Utilisateurs (UI) touchent autant les interfaces « hommes – machines » que les packagings produits. Ces concepts appartenant au domaine de l’Usability (que l’on peut traduire par Ergonomie), ils sont à mettre en relation avec les concepts :

  • Intuitivité (ce qui est intuitif, peut être compris par intuition) ;
  • Efficacité (permettre d’atteindre le résultat prévu) ;
  • Efficience (atteint le résultat avec un effort moindre ou dans un laps de temps minimal) ;
  • Satisfaction (confort de l’interaction pour l’utilisateur) ;

Et ce, dans un contexte d’utilisation précis. Ainsi, UX et UI s’interconnectes, intimement liés à une série de facteurs externes, tels que :

Le medium (un paquet de biscuit, un journal | un site web, une application mobile) – ainsi que son fonctionnement et ses possibilités techniques (tablette tactile, smartphone, etc.) ;
Le contexte d’utilisation (en transport en commun, sur son lieu de travail ou chez soi, par exemple) ;

L’utilisateur (mère de famille, professionnel aguerri, navetteur, néophyte non familiarisé aux nouvelles technologies,  etc.), avec tout ce que cela implique (sa psychologie, ses habitudes, son profil social et ses perceptions, notamment).

Usability, User Experience (UX) et User Interface (UI) : comment les différencier ? - EXIT Studio

Prendre en compte le profil (et les besoins) du public auquel s’adresse un produit spécifique, son contexte d’utilisation, ainsi que le fonctionnement de son interface ; me semblent être à la base même de tout type de conception. Qu’il s’agisse de design, de développement ou même d’e-marketing, Expérience et Interface Utilisateur (UX et UI) doivent être considérés avec autant d’importance que le produit en lui-même. Ils conditionneront son succès, sa qualité et la fidélisation d’une clientèle parfois difficilement acquise.

« While UXers continue to fight the daily battle in some organizations to be included in the « creative » reviews covering design comps based off their interactive wireframes, leading organizations embracing UX more fully will be utilizing UX on all projects, from digital to the more traditional, such as print and packaging. Print pieces are more than art and copy. Everything the consumer touches is part of a brand experience and UX aims to improve it all ».

Traduction :

Tandis que les professionnels dédiés à l’UX se battent continuellement dans certaines organisations pour faire partie du processus créatif; les organisations à la pointe incluent eux l’UX de manière plus significative dans leurs projets (qu’ils soient digitaux ou plus traditionnels, tels que le print ou le packaging). Design et packaging sont bien plus que de l’art. Tout ce qu’un consommateur touche constitue une expérience spécifique et l’Expérience Utilisateur (UX) a pour but de l’améliorer.

 

Mots-clés

  • User Experience (UX)
  • User Interface (UI)
  • Expérience Utilisateur
  • Interface Utilisateur
  • Usability
  • Ergonomie

Sources

Plus d'articles pouvant vous intéresser

Voir tous les articles

Envie de faire partie de l’aventure EXIT Studio ?

Envie d’un site attractif et performant, tant optimisé pour le référencement qu’accessible sur tablettes et smartphones ?

Demander un devis