UI UX Le guide complet : Qui fait quoi et pourquoi ?

Dans le jargon des métiers de la conception web, on parle souvent d’UX et d’UI, ou expérience utilisateur (User eXperience) et interface utilisateur (User Interface) aux termes français.

On confond toujours entre les deux, on n’arrive pas à différencier l’un de l’autre. Ce qui est important à savoir c’est que l’UX et l’UI sont différents mais ils se complètent. L’UX est un processus complet qui prend en compte l’UI mais aussi le contenu, le design, l’architecture du site.

Qu’est ce que l’UX et l’UI ?

Quelle est la différence entre les deux ?

Comment fonctionnent-ils ensemble ?

C’est quoi l’Expérience Utilisateur (UX) ?

L'expérience utilisateur est l'exigence pour le site Web ou le produit à répondre aux besoins exacts du client, sans des encombres ni de la peine ceci bien avant la simplicité et l'élégance. L'expérience utilisateur réelle va bien au-delà de donner aux clients ce qu'ils disent qu'ils veulent, ou de fournir une liste des fonctionnalités. Afin d'obtenir une expérience utilisateur de haute qualité dans les offres d'une entreprise, il doit y avoir une fusion sans faille de services et de plusieurs disciplines, y compris l'ingénierie, le marketing, la conception graphique et industrielle et la conception d'interface.

Il ya beaucoup à considérer si on veut construire une expérience utilisateur complète et de valeur. Peter Morville l’un des pionniers de l'architecture informationnelle présente l’expérience utilisateur ainsi :

Utile: Le contenu doit être original et doit répondre à un besoin

Utilisable: Le site doit être facile à utiliser

Désirable: L’image, l’identité, la marque et des autres éléments de conception sont utilisés pour évoquer l'émotion et l'appréciation de l’utilisateur.

Trouvable: Le contenu doit être navigable et localisable sur site et hors site.

Accessible: le contenu doit être accessible aux personnes handicapées.

Crédible: les utilisateurs doivent faire confiance et croire en ce que vous leur dites.

Les éléments de l’UX Design :

La stratégie: tout commence par cette étape. On clarifie ce qu’on veut faire sortir du site et Ce que les utilisateurs veulent.

Le scope: Transforme la stratégie en exigences et spécifie quelles caractéristiques le site devra inclure

La structure: donne forme au scope et montre comment les pièces s'emboîteront-elles et se comporteront-elles ensemble.

Le skeleton: rend la structure plus concrète et spécifie les composants qui permettront aux utilisateurs d’utiliser le site web.

La surface: amène tous les éléments ensemble visuellement et donne l’allure finale du produit.

C’est quoi l’Interface Utilisateur (UI) ?

Dans la technologie de l'information (IT), l'interface utilisateur (UI) est tout ce qui est conçu dans un dispositif d'information avec lequel une personne peut interagir. Cela peut inclure des écrans d'affichage, des claviers, une souris et l'apparence d'un bureau. C'est aussi la manière dont un utilisateur interagit avec une application ou un site Web. La dépendance croissante de nombreuses entreprises sur les applications Web et les applications mobiles a conduit de nombreuses entreprises à accorder une priorité accrue à l'interface utilisateur afin d'améliorer l'expérience globale de l'utilisateur.

Les bases de l’UI :

Garder l'interface simple: Les meilleures interfaces sont presque invisibles pour l'utilisateur. Ils évitent les éléments inutiles et sont plus clairs.

Créer de la cohérence et utiliser des éléments d'interface utilisateur courants: En utilisant des éléments courants dans l’interface utilisateur, les utilisateurs se sentent plus à l'aise et sont capables de faire les choses plus rapidement. Il est également important de créer des modèles dansle langage, la mise en page et la conception sur l'ensemble du site pour faciliter l'efficacité. Une fois qu'un utilisateur apprend à faire une quelque chose, il devrait être capable de transférer cette habilité à d'autres parties du site.

Être utile dans la mise en page: Considérer les relations spatiales entre les éléments de la page et structurer la page en se basant sur l'importance de chaque élément. Le placement attentif des articles peut aider à attirer l'attention sur les informations les plus importantes et peut aider à la lisibilité.

Utiliser stratégiquement la couleur et la texture: On peut diriger l'attention vers ou détourner l'attention loin des éléments en utilisant la couleur, la lumière, le contraste et la texture à son avantage.

Utiliser la typographie pour créer la hiérarchie et la clarté: Examiner attentivement comment on utilise le type face. Les différentes tailles, polices et dispositions du texte aident à augmenter la lisibilité.

Assurer que le système communique ce qui se passe: Il faut toujours informerles utilisateurs des actions, des changements d'état à adopter ou des erreurs. L'utilisation de différents éléments de l’IU pour communiquer le statut et, si nécessaire, les prochaines étapes à faire peuvent réduire la frustration de l’utilisateur.

Penser à la mise par défaut: En pensant soigneusement et en anticipant les objectifs que les internautes apportent au site, on peut créer des valeurs par défaut qui réduisent la chargesur l'utilisateur. Cela devient particulièrement important quand il s'agit de la conception de formulaire où on peut avoir la possibilité d'avoir certains champs pré-choisis ou remplis.

Quelle est la différence entre l’UX et l’UI Design ?

Souvent l’UX est assimilé à l’UI pour la simple raison de croire que l’Expérience Utilisateur se limite au fait de surfer sur un site avec un design agréable pour accéder à l’information souhaitée, sans taper des lignes de code.

En effet, l’interface utilisateur est ce qui fait le lien entre l’homme et la machine. Il est donc la « version finale » présentée à l’internaute qui va lui permettre de naviguer aisément sur le site web sans lui demande une grande concentration.

L’UI doit être le résultat d’un travail plus approfondi, celui de la prise en considération globale des besoins de l’utilisateur. Le rôle de l’UX parvient à apporter des solutions efficaces aux problèmes et aux attentes des internautes c’est à dire de réfléchir à une conception centrée utilisateur.

L’UI intervient plusieurs fois dans le processus de l’UX. Il s’agit effectivement de proposer une jolie enveloppe et donc de créer un design fonctionnel, qui inspire de la confiance et qui permette à l’utilisateur d’arriver à son but : trouver ce qu’il est venu chercher et concrétiser son action.

Voici une série d’images d’Ed Lea*qui illustre parfaitement le concept :

Ed Lea *: Concepteur interactif et de visuel pour les applications Web et mobiles Chez Google. 12 ans d'expérience dans la construction de designs attrayants et pixel-parfait.