Les différences entre le design d'interface et d'expérience

Avec l’essor du numérique, de nombreux métiers de la conception se sont répandus et spécialisés. Souvent cacher derrière les acronymes anglophones d'UI UX Designer, pour "User Inferface" et "User eXprience", les frontières entre les deux disciplines et ce qu'elles referment peuvent parfois sembler floues, d’autant qu'elles sont régulièrement utilisées ensemble.

Le design d’expérience (UX)

On peut d’affirmer, qu'il s'agit de réaliser des expériences numériques, de service ou physique agréable et facile. Le designer d'expérience, et en charge d'élaborer le cheminement vers ce résultat. Il doit répondre à ces questions : quels sont les besoins des utilisateurs, les difficultés qu'ils rencontrent, que cherche-t-il à accomplir, comment pourrions-nous améliorer ceci ou cela, par quel moyen, quel est le vrai problème, peut-on le résoudre ou le supprimer ? Il y a plusieurs concepts clé du design d’expérience :

• L'utilisabilité

  L'utilisabilité d'un produit ou d'un service est sa qualité à répondre à un besoin.

  Le concept reste abstrait ?
  Prenons le Grand Bi, l’ancêtre de la bicyclette que tout le monde connaît. Le grand bi est un vélo qui se compose d'une grande roue avant de 120cm sur laquelle est perché l'usager. L'utilisabilité de la bicyclette et meilleure que celle du Grand Bi, il est plus aisé de l’enjamber, plus sécurisant et stable, la chaîne apporte davantage de confort lors d'un trajet en changeant de vitesse.

  

  Ces améliorations ont souvent pour conséquence de créer un avant et un après, de sorte que personne ne désire revenir à la version d'avant. Aujourd'hui, plus personne ne roule en Grand Bi.

  La logique reste la même sur le numérique, on simplifie, clarifie les parcours, les pages, les contenus et proposons des fonctionnalités qui répondent aux besoins et aux problèmes rencontrés par les utilisateurs.

• La compréhensibilité
  Les textes et les microcopies présentes dans les interfaces ont une importance cruciale pour guider les utilisateurs. Il vous est sans doute arrivé lors d'une démarche en ligne d'avoir à remplir un champ de formulaire ou d'avoir à renseigner un document dont vous ignorez la signification et où vous le procurez ? (CPAM, RIO, INE, numéro Amélie, etc.).
  Ou d'éprouver des difficultés à suivre ou comprendre des parcours particuliers comme envoyer un vêtement Vinted la première fois, retourner un colis, commander une carte de transport, faire une démarche en ligne.
  La compréhensibilité est un vecteur important, d'une expérience utilisateur réussi, pour y parvenir, il est d'usage d'auditer et de tester les interfaces auprès des utilisateurs finaux.

• La satisfaction
  Dans les relations Interface-Homme-Machine, il est important de considérer l’aspect hédoniste de l'Homme. Le design émotionnel et la gamification sont des réponses à ces problématiques d'engagement et de fidélisation d'une conception, et pour réaliser un parcours agréable et stimulant.

Le design d'interface (UI)

Nous y sommes, l'UX designer a mis à plat un parcours d'achat d'une librairie en ligne : l’enchaînement des pages, ce qu'elles vont comporter comme information et fonctionnalités. Il reste à mettre cela en forme, la dernière étape avant le développement du dispositif.

Mais alors qu’est-ce que le design d'interfaces ?
Comme le design d'expériences, ce sont des sciences, avec des règles et des méthodes. Pour produire une bonne interface, jolie et harmonieuse, il existe de nombreuses règles, elles sont développées dans des ouvrages comme Refactoring UI ou Practical UI. Ces règles découlent de ces principes fondamentaux :

• La Hiérarchie de l'information
  Les informations (titres, prix, description, etc.) ont des niveaux d'importances différents, il est nécessaire que cette différence soit également retranscrite sur les dispositifs. Cette hiérarchie se met en place de 2 manières, par le contraste : (taille, graisse et couleurs de la typographie) et par son positionnement : (plutôt en haut ou en bas dans la page, sa proximité avec certains éléments).
  Cette hiérarchie permet à l'usager de trouver plus rapidement les informations dont il a besoin.

• Lisibilité
  Pour les textes, avoir une taille de typographe, un interlignage, une longueur de ligne, un nombre le ligne par paragraphe et un contraste suffisant pour rendre l'information accessible aux utilisateurs.

• Cohérence Une interface intuitive repose sur de nombreuses normes qu'il faut respecter : une icône avec 3 barres horizontales représente un menu, la couleur verte est utilisée pour un message de succès, l’accès à mon compte se trouve à droite de la navigation, les cases à cocher multiple sont carrées et non rondes.
  
  Cette cohérence ainsi respectée, il est davantage aisé de comprendre et trouver les fonctionnalités et les informations que le dispositif présente. Le principe inverse existe aussi, sur certains sites un champ de texte et stylisé seulement par une bordure inférieure, l'usage peut le confondre facilement avec un titre avec entête, c'est une affordance cachée.
  
  Si la conception fait abstraction de certaines de ces normes, comme souligner des mots, l’utilisateur peut penser qu'il s’agit de lien. C'est ce que l'on appelle une fausse affordance.
  
  La cohérence, c'est aussi, avoir tout le long des parcours des interfaces avec des composants comme des boutons, menu, case à cocher homogène. Ces éléments font partie de ce que l'on appelle un système de design. Lorsque vous allez sur les différents sites de l'état, vous pouvez vous rendre compte qu'ils se ressemblent beaucoup en apparence et qu'ils sont identifiables en tant que tel.

La relation entre ces 2 disciplines

Si nous devions schématiser ces catégories design, le design d'expérience utilisateur engloberait le design d'interfaces. Ce dernier est à part entière un élément clé d'une expérience utilisateur réussite. Les utilisateurs ont besoin d'une interface harmonieuse pour y trouver de la satisfaction à son utilisation. Bien hiérarchisé pour trouver les informations dont ils ont besoin et cohérente pour percevoir les fonctionnalités de cette dernière.