Le blog de Sophie

Usabi­lity, User Expe­rience (UX) et User Inter­face (UI) : comment les diffé­ren­cier ?

Usabi­lity, User Expe­rience (UX) / Expé­rience Utili­sa­teur et User Inter­face (UI) / Inter­face Utili­sa­teur ; des termes qui ne vous disent peut-être rien et que même les indi­vi­dus issus du web ont du mal à distin­guer. Cet article tentera donc – tant bien que mal – de s’at­te­ler à cette tâche avec une série d’exemples ayant pour but de bien vous faire saisir la nature de ces trois concepts.

Différence entre User Experience (UX) et User Interface (UI)

Réus­sir à distin­guer Usabi­lity, User Expe­rience (UX) et User Inter­face (UI)

De manière très simpli­fiée, l’uti­li­sa­bi­lité (égale­ment appe­lée « apti­tude à l’uti­li­sa­tion) regroupe à la fois l’Ex­pé­rience et l’In­ter­face Utili­sa­teur (Usabi­lity = UX et UI).

Selon la norme ISO 9241–11 : « L’uti­li­sa­bi­lité est défi­nie comme le degré selon lequel un produit peut être utilisé, par des utili­sa­teurs iden­ti­fiés, pour atteindre des buts défi­nis avec effi­ca­cité (le produit permet à ses utili­sa­teurs d’at­teindre le résul­tat prévu), effi­cience (atteint le résul­tat avec un effort moindre ou requiert un temps mini­mal) et satis­fac­tion (confort et évalua­tion subjec­tive de l’in­te­rac­tion pour l’uti­li­sa­teur), dans un contexte d’uti­li­sa­tion spéci­fié ». L’Usa­bi­lity est ainsi assez proche de l’Er­go­no­mie.

Cela se complexi­fie lorsqu’il s’agit de diffé­ren­cier l’UI de l’UX :

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

Traduc­tion :

L’in­ter­face utili­sa­teur est la partie du produit qui fait face à l’uti­li­sa­teur lorsqu’il regarde le site. L’ex­pé­rience utili­sa­teur est ce qu’é­prouve l’uti­li­sa­teur lorsqu’il regarde le site.

À ce titre, cette défi­ni­tion de l’UX / User Expe­rience ou Expé­rience Utili­sa­teur, m’a parue parti­cu­liè­re­ment adéquate :

“User Expe­rience (UX) involves a person’s beha­viors, atti­tudes, and emotions about using a parti­cu­lar product, system or service. User Expe­rience includes the prac­ti­cal, expe­rien­tial, affec­tive, meaning­ful and valuable aspects of human–­com­pu­ter inter­ac­tion and product owner­ship. Addi­tio­nally, it includes a person’s percep­tions of system aspects such as utility, ease of use and effi­ciency. User Expe­rience may be consi­de­red subjec­tive in nature to the degree that it is about indi­vi­dual percep­tion and thought with respect to the system. User Expe­rience is dyna­mic as it is constantly modi­fied over time due to chan­ging usage circum­stances and changes to indi­vi­dual systems as well as the wider usage context in which they can be found”.

Traduc­tion :

L’UX implique le compor­te­ment d’un indi­vidu, ses atti­tudes ainsi que ses émotions, au moment de l’uti­li­sa­tion d’un produit, d’un système ou d’un service spéci­fique. L’UX inclut les pratiques résul­tant de l’ex­pé­rience, de l’af­fec­tif et du signi­fi­ca­tif dans de nombreux aspects de l’in­te­rac­tion homme – machine, mais égale­ment au sein des proprié­tés d’un produit. De plus, cela inclut les percep­tions d’une personne vis-à-vis des aspects d’un système, tel que son utilité, sa faci­lité d’uti­li­sa­tion et son effi­ca­cité. L’UX peut être consi­dé­rée de nature subjec­tive puisqu’elle touche à la percep­tion et à la réflexion indi­vi­duelle. L’UX est dyna­mique en ce qu’elle se retrouve constam­ment modi­fiée au cours du temps, de par les circons­tances d’usage et le contexte dans lequel elle peut évoluer.

Tout comme cette défi­ni­tion de l’UI / User Inter­face ou Inter­face Utili­sa­teur :

“The user inter­face […] is the space where inter­ac­tions between humans and machines occur. […] The design consi­de­ra­tions appli­cable when crea­ting user inter­faces are rela­ted to or involve such disci­plines as ergo­no­mics and psycho­logy”.

Traduc­tion :

L’UI, dans le domaine du design, est l’es­pace où les inter­ac­tions entre l’homme et la machine ont lieu. Les consi­dé­ra­tions prisent en compte au moment de la concep­tion graphique de ces inter­faces utili­sa­teurs sont inti­me­ment liées à l’er­go­no­mie et à la psycho­lo­gie.

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

Méta­pho­rique­ment parlant, nous pour­rions dire qu’une bonne expé­rience utili­sa­teur, c’est l’art de savoir glis­ser sur la vague, aussi simple­ment et natu­rel­le­ment que possible. L’in­ter­face utili­sa­teur est la planche de surf en elle-même, sa forme et sa concep­tion faisant en sorte qu’elle glisse de manière opti­male à la surface de l’eau, la cire appliquée préa­la­ble­ment dessous amélio­rant la glisse et les nervures du dessus assu­rant le main­tien du surfer.

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

Concrè­te­ment, l’en­semble parti­cipe d’une bonne Expé­rience Utili­sa­teur. C’est grâce à l’op­ti­mi­sa­tion de la planche (sa forme, sa coupe, le type de pein­ture, etc.) à la cire passée dessous et au nervures du dessus – qui offrira une certaine stabi­lité au surfer – qu’il est possible de glis­ser aussi natu­rel­le­ment et effi­ca­ce­ment sur la vague. L’In­ter­face Utili­sa­teur (UI) parti­cipe donc de manière primor­diale à l’Ex­pé­rience Utili­sa­teur (UX) tout en en faisant partie. Si UX et UI sont bien deux choses distinctes, elles restent inti­me­ment imbriquées l’une à l’autre.

UX UI

Appliquons désor­mais ces idées à l’uni­vers du numé­rique (le web, le mobile, l’in­te­rac­tif). L’In­ter­face Utili­sa­teur (UI) serait consti­tuée d’une série de boutons ainsi que de leur design ; l’Ex­pé­rience Utili­sa­teur (UX) indiquera que, lorsque l’on clique ou appuie (tacti­le­ment, à l’aide du doigt) dessus, ce dernier doit s’en­fon­cer. Mais pourquoi ? Parce que face au design d’un bouton ayant une ombre portée, notre instinct natu­rel nous laisse à penser qu’il va s’en­fon­cer une fois que nous aurons appuyé dessus. Si le curseur de votre souris fini par simple­ment s’écra­ser dessus sans que rien ne se passe, nous éprou­vons une sorte de décep­tion. Votre expé­rience utili­sa­teur s’en retrouve biai­sée parce que ce qu’il se passe lorsque vous cliquez sur ce bouton va à l’en­contre de votre instinct, de ce que vous imagi­nez qu’il doit se passer.

Boutons à ombre portée

Le passage du Skeuo­mor­phism au Flat Design a cepen­dant pas mal changé la donne. Beau­coup de sites ne proposent désor­mais plus de boutons à ombre portée qui s’en­foncent virtuel­le­ment lorsque l’on clique dessus. Cela reste une ques­tion de concep­tion graphique mais égale­ment car, depuis 10 ans, les inter­nautes ce sont habi­tués à l’in­te­rac­tion avec ces boutons. De sorte que leur donner l’ap­pa­rence d’un bouton physique n’est plus néces­saire pour que l’in­ter­naute comprenne qu’il est possible de cliquer dessus. L’ar­ri­vée du mini­ma­lisme ainsi que la tendance du web a cher­cher à rendre le design et les inter­faces toujours plus effi­ciente, a amené à l’aban­don du Skeuo­mor­phism et à l’avè­ne­ment du Flat Design. L’illus­tra­tion présen­tée ci-dessus sert prin­ci­pa­le­ment à vous faire comprendre ce que signi­fie l’Ex­pé­rience Utili­sa­teur (UX) dans le domaine du web, et à le diffé­ren­cier de l’In­ter­face Utili­sa­teur (UI) consti­tuée par le bouton et son design.

Usabi­lity et Expé­rience Utili­sa­teur (UX) : plus d’in­tui­ti­vité pour amélio­rer natu­rel­le­ment effi­ca­cité, effi­cience et satis­fac­tion

À ce titre, l’Ex­pé­rience Utili­sa­teur (UX) et les termes tels qu’in­tui­ti­vité ou « user-friendly » sont souvent employés de concert. Dans l’uni­vers de la concep­tion de produit et de l’in­te­rac­ti­vité, l’in­tui­ti­vité liée à l’Ex­pé­rience Utili­sa­teur (UX) laisse à penser qu’un produit doit pouvoir être utili­sable sans manuel d’uti­li­sa­tion. Si cela n’est pas rendu possible par tous les appa­reils (un four multi­fonc­tion ou un smart­phone dernière géné­ra­tion seront plus diffi­ci­le­ment « intui­ti­ve­ment » utili­sables qu’un simple grille-pain), tendre vers cet idéal amélio­rera de manière signi­fi­ca­tive l’Ex­pé­rience Utili­sa­teur (UX). Ainsi, les termes « effi­ca­cité », « effi­cience » et « satis­fac­tion » que l’on retrou­vait dans la défi­ni­tion de l’Usa­bi­lity (Ergo­no­mie) font partie inté­grante d’une bonne Expé­rience Utili­sa­teur (UX). Dans le domaine du web / mobile :

  • Opti­mi­ser l’ar­chi­tec­ture de l’in­for­ma­tion du site en dimi­nuant le nombre de clics permet­tant d’at­teindre l’in­for­ma­tion recher­chée ;
  • Travailler l’in­ti­tulé des liens sur la page d’ac­cueil afin que lorsque l’in­ter­naute entre dans une page, il n’ait pas à reve­nir en arrière car celle-ci ne contient pas l’in­for­ma­tion qu’il pensait y trou­ver ;
  • Opti­mi­ser le contenu textuel, de sorte que l’in­ter­naute y retrouve l’in­for­ma­tion recher­chée, ne soit pas trop vite fati­gué par une lecture sur écran (bien diffé­rente d’une lecture sur papier) et puisse parcou­rir rapi­de­ment (et en diago­nale) l’ar­ticle, tout en saisis­sant de quoi ce dernier traite ;
  • Indiquer dans chaque champ d’un formu­laire de contact, quelle infor­ma­tion doit y être insé­rée ;
  • Etc.

UX UI Mobile Smartphone Wireframe

Dans le domaine des produits et du packa­ging :

  • Opti­mi­ser l’in­te­rac­tion avec le produit en dimi­nuant (autant que possible) la complexité d’uti­li­sa­tion de l’ap­pa­reil ;
  • Si des icônes / images sont employées, que celles-ci soient éloquentes et permettent de saisir immé­dia­te­ment de quoi il retourne (par exemple : le fait d’uti­li­ser un engre­nage / un rouage pour indiquer qu’il s’agit des para­mètres | utili­ser un ther­mo­mètre pour indiquer qu’il s’agit d’un indi­ca­teur de tempé­ra­ture) ;
  • Mettre à dispo­si­tion les « outils » complé­men­taires à son utili­sa­tion (par exemple : un gobe­let doseur d’eau avec un cuiseur vapeur | une télé­com­mande avec un lecteur dvd).
  • Etc.

UX UI Design icônes

Ainsi, en amélio­rant l’in­tui­ti­vité (carac­tère de ce qui est intui­tif, qui peut être compris par intui­tion)  d’un produit  / d’un site, on augmente natu­rel­le­ment son effi­ca­cité ainsi que son effi­cience, et la satis­fac­tion de l’uti­li­sa­teur / l’in­ter­naute s’en retrouve amélio­rée. Des tas de facteurs peuvent influen­cer la manière avec laquelle un inter­naute va se sentir lorsqu’il arrive sur un site et le parcourt / lorsqu’il utilise un nouveau produit ou appa­reil. Il est ainsi impor­tant de pouvoir s’as­su­rer que le site / le produit utilise à bon escient ces facteurs externes en les conver­tis­sant à son propre compte.

L’UI et l’UX appliqués aux packa­gings produits

La ques­tion de l’UI et de l’UX est aussi impor­tante au moment d’en­vi­sa­ger une appli­ca­tion ou un site web, qu’au moment de la créa­tion d’un format ou d’un packa­ging. L’exemple du quoti­dien « Metro » et du packa­ging « Prince de Lu » vous permet­tront d’y voir plus clair quant à la perti­nence et l’im­por­tance de tenir compte de l’uti­li­sa­teur cible ainsi que de son contexte d’uti­li­sa­tion, au moment de conce­voir le design d’un embal­lage.

Etude de cas : le format du quoti­dien « Metro »

Metro Newspaper Quotidien Metro Journal

Le jour­nal Metro est un quoti­dien gratuit, mis à la dispo­si­tion des navet­teurs dans toutes les gares du pays. Bien que récem­ment, les grands quoti­diens natio­naux aient revus leur format pour rendre la lecture plus aisée :

« Afin de reconqué­rir le lecto­rat, de nombreux éditeurs de presse réduise aujourd’­hui le format de leurs titres. Cette tendance est surtout visible dans la presse maga­zine mais se décline égale­ment en presse quoti­dienne. […] Moins de papier, moins de coût, faci­lité de trans­port et de lecture sont autant d’avan­tages clefs de cette stra­té­gie ».

Jusqu’il y a peu, le Metro était l’un des seuls jour­naux à dispo­ser d’un format de plus petite taille (Format Tabloïd A3). Pourquoi ? Consi­dé­rant son public cible (les navet­teurs) et son contexte d’uti­li­sa­tion (en dépla­ce­ment, dans le train, soit debout, soit assis dans un espace limité), il leur fallait mettre à dispo­si­tion un format plus facile à mani­pu­ler. Lire Le Soir (dans son ancien format) dans le train ? Vous imagi­nez vous déplier un jour­nal de 50 x 30 cm en 7 colonnes dans le train ? Diffi­cile à réali­ser et peu pratique à lire. Dans ce cas de figure, l’In­ter­face Utili­sa­teur (le quoti­dien papier en lui-même) et l’Ex­pé­rience Utili­sa­teur (un format adapté à une lecture par des navet­teurs en trans­port en commun) sont des éléments primor­diaux qui conver­tissent des facteurs externes en expé­rience béné­fique (laquelle fidé­li­sera ses lecteurs mais lui permet­tra égale­ment d’en acqué­rir de nouveaux).

Etude de cas : le packa­ging du « Petit Prince de Lu »

Nouveau Packaging Prince de Lu

L’exemple de la modi­fi­ca­tion de packa­ging du « Prince du Lu » en est un autre exemple flagrant. Des années durant, le packa­ging de cette marque de biscuits four­rés au choco­lat resta inchangé. Il présen­tait pour­tant de nombreux incon­vé­nients – souvent poin­tés du doigt par ses milliers de consom­ma­teurs – lesquels parti­ci­paient à dépré­cier l’Ex­pé­rience Utili­sa­teur (UX) :

  • Diffi­culté à atteindre les derniers biscuits du paquet ;
  • Diffi­culté d’ou­ver­ture du paquet avec le premier biscuit qui avait tendance à se briser ;
  • Problème de miettes ;
  • Etc.

 

« Depuis septembre 2013, l’em­bal­lage cylin­drique se voit équipé d’un nouveau système d’ou­ver­ture / ferme­ture repo­si­tion­nable, qui se veut plus pratique. Placé debout, le paquet fonc­tionne main­te­nant 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’émis­sion « coûte que coûte » sur le Prince de Lu (datant de mai 2013) montre comment une étude menée auprès de ses consom­ma­teurs cibles (les mères de familles) a permis de revoir le packa­ging (l’In­ter­face Utili­sa­teur) dans le but d’amé­lio­rer l’Ex­pé­rience Utili­sa­teur du produit.

En conclu­sion – Usabi­lity, UX et UI : des concepts inter­con­nec­tés

Expé­rience Utili­sa­teur (UX) et Inter­face Utili­sa­teurs (UI) touchent autant les inter­faces « hommes – machines » que les packa­gings produits. Ces concepts appar­te­nant au domaine de l’Usa­bi­lity (que l’on peut traduire par Ergo­no­mie), ils sont à mettre en rela­tion avec les concepts :

  • Intui­ti­vité (ce qui est intui­tif, peut être compris par intui­tion) ;
  • Effi­ca­cité (permettre d’at­teindre le résul­tat prévu) ;
  • Effi­cience (atteint le résul­tat avec un effort moindre ou dans un laps de temps mini­mal) ;
  • Satis­fac­tion (confort de l’in­te­rac­tion pour l’uti­li­sa­teur);

Et ce, dans un contexte d’uti­li­sa­tion précis. Ainsi, UX et UI s’in­ter­con­nectes, inti­me­ment liés à une série de facteurs externes, tels que :

  • Le medium (un paquet de biscuit, un jour­nal | un site web, une appli­ca­tion mobile) – ainsi que son fonc­tion­ne­ment et ses possi­bi­li­tés tech­niques (tablette tactile, smart­phone, etc.) ;
  • Le contexte d’uti­li­sa­tion (en trans­port en commun, sur son lieu de travail ou chez soi, par exemple) ;
  • L’uti­li­sa­teur (mère de famille, profes­sion­nel aguerri, navet­teur, néophyte non fami­lia­risé aux nouvelles tech­no­lo­gies,  etc.), avec tout ce que cela implique (sa psycho­lo­gie, ses habi­tudes, son profil social et ses percep­tions, notam­ment).

User Experience UX Expérience Utilisateur

Prendre en compte le profil (et les besoins) du public auquel s’adresse un produit spéci­fique, son contexte d’uti­li­sa­tion, ainsi que le fonc­tion­ne­ment de son inter­face ; me semblent être à la base même de tout type de concep­tion. Qu’il s’agisse de design, de déve­lop­pe­ment ou même d’e-marke­ting, Expé­rience et Inter­face Utili­sa­teur (UX et UI) doivent être consi­dé­rés avec autant d’im­por­tance que le produit en lui-même. Ils condi­tion­ne­ront son succès, sa qualité et la fidé­li­sa­tion d’une clien­tèle parfois diffi­ci­le­ment acquise.

« While UXers conti­nue to fight the daily battle in some orga­ni­za­tions to be inclu­ded in the « crea­tive » reviews cove­ring design comps based off their inter­ac­tive wire­frames, leading orga­ni­za­tions embra­cing UX more fully will be utili­zing UX on all projects, from digi­tal to the more tradi­tio­nal, such as print and packa­ging. Print pieces are more than art and copy. Every­thing the consu­mer touches is part of a brand expe­rience and UX aims to improve it all ».

Traduc­tion :

tandis que les profes­sion­nels dédiés à l’UX se battent conti­nuel­le­ment dans certaines orga­ni­sa­tions pour faire partie du proces­sus créa­tif; les orga­ni­sa­tions à la pointe incluent eux l’UX de manière plus signi­fi­ca­tive dans leurs projets (qu’ils soient digi­taux ou plus tradi­tion­nels, tels que le print ou le packa­ging). Design et packa­ging sont bien plus que de l’art. Tout ce qu’un consom­ma­teur touche consti­tue une expé­rience spéci­fique et l’Ex­pé­rience Utili­sa­teur (UX) a pour but de l’amé­lio­rer.

Je vous laisse à présent avec ces deux (parti­cu­liè­re­ment perti­nentes) info­gra­phies 😉 :

  • La première établit une distinc­tion entre un web desi­gner et un desi­gner spécia­lisé en expé­rience utili­sa­teur ;
  • La seconde présente une diffé­rence entre UX et UI, appliqué à un repas.

Ux Designers Vs Web Designers

Difference Between Ux Ui Différence entre UX et UI