Différences entre UX et UI et règles de base.
Définition de l'UX | Experience Utilisateur.
L’expérience utilisateur (UX), également connue sous le nom d’ergonomie ou de conception centrée sur l’utilisateur, désigne la qualité globale de l’interaction qu’un utilisateur a avec un produit, un service ou un système. Elle englobe tous les aspects de cette interaction, y compris l’aspect visuel, la convivialité, la facilité d’utilisation, la satisfaction utilisateur et la réponse aux besoins et attentes des utilisateurs.
L’objectif principal de l’expérience utilisateur est de créer des produits ou des services qui offrent une expérience positive, agréable et utile aux utilisateurs. Cela implique de comprendre les besoins, les motivations, les comportements et les attentes des utilisateurs, ainsi que de concevoir des interfaces et des interactions qui répondent à ces éléments.
Pour améliorer l’expérience utilisateur, les concepteurs et les développeurs utilisent diverses méthodes et techniques, notamment la recherche utilisateur, les tests utilisateurs, la conception centrée sur l’utilisateur et l’itération basée sur les commentaires des utilisateurs. L’objectif ultime est de créer des produits et des services qui sont intuitifs, faciles à utiliser et qui apportent une valeur ajoutée aux utilisateurs, ce qui peut conduire à une fidélité accrue, une meilleure rétention des utilisateurs et une plus grande satisfaction globale.
Définition de l'UI | Interface Utilisateur.
L’interface utilisateur (UI) fait référence à la partie visuelle et interactive d’un produit, d’une application ou d’un système avec lequel les utilisateurs interagissent. Elle englobe tous les éléments graphiques, les contrôles, les icônes, les menus, les boutons et les autres éléments qui permettent aux utilisateurs d’effectuer des actions et de communiquer avec le produit.
L’objectif principal de l’interface utilisateur est de fournir une expérience conviviale, intuitive et efficace aux utilisateurs. Elle doit être conçue de manière à ce que les utilisateurs puissent facilement comprendre comment utiliser le produit, accomplir leurs tâches de manière fluide et efficace, et atteindre leurs objectifs de manière satisfaisante.
Une bonne conception d’interface utilisateur tient compte des principes de convivialité, d’esthétique visuelle, de cohérence, de hiérarchie visuelle, de lisibilité, d’accessibilité et d’autres considérations importantes. Elle implique également la création d’une disposition claire et organisée, l’utilisation de couleurs et de typographies appropriées, la fourniture de commentaires et d’indications visuelles pour guider les utilisateurs, et la minimisation des erreurs et des obstacles potentiels.
Il est important de noter que l’interface utilisateur ne se limite pas à l’aspect visuel, mais englobe également l’interaction utilisateur-machine. Cela inclut la façon dont les utilisateurs interagissent avec les éléments de l’interface, tels que le clic, le glissement, le défilement, le zoom, les gestes tactiles, les commandes vocales, etc.
En résumé, l’interface utilisateur vise à faciliter l’interaction entre les utilisateurs et les produits ou les systèmes, en fournissant une expérience utilisateur agréable, intuitive et efficace.
Comprendre la différence entre UX et UI.
Voici un des exemples les plus célèbres pour différencier l’UX de l’UI. On imagine un contenu et une tâche à accomplir par l’utilisateur, au travers d’une bouteille de ketchup.
Le contenu : Ce que vous proposez à l’utilisateur (sauce ketchup)
La tâche : Ce que l’utilisateur veut faire (verser du ketchup dans son assiette)
L’interface utilisateur (UI) : Ce qui va être utilisé pour accéder au contenu (le conteneur , la forme de la bouteille)
L’ergonomie (UX): La capacité d’un objet à être facilement utilisé par l’utilisateur pour compléter la tâche (facilité de la bouteille pour mettre du ketchup simplement et proprement dans l’assiette)
Les règles de base de l'UX.
1.Les erreurs à ne pas commettre.
Créer un site internet non désirable pour les utilisateurs.
Un site internet comme celui ci dessous apparaît obsolète et ne donne pas confiance.
Un site obsolète peut donner l’impression que l’entreprise ou l’organisation derrière le site n’est pas à jour avec les dernières tendances et technologies. Cela peut réduire la crédibilité de l’entreprise et la confiance des utilisateurs dans les produits ou services proposés.
Un site vieux peut avoir une interface utilisateur dépassée, avec un design peu attrayant, des couleurs démodées, des polices peu lisibles et une mise en page désuète. Cela rendra la navigation sur le site moins agréable et frustrante pour les utilisateurs.
Ajouter de la complexité au site.
Une interface complexe avec beaucoup d’onglets, de boutons, de champs de saisies peut facilement décourager l’utilisateur.
Un site complexe peut avoir une structure de navigation confuse avec des menus déroulants, des sous-menus multiples et des liens multiples. Les utilisateurs peuvent se perdre ou avoir du mal à trouver les informations qu’ils recherchent, ce qui entraîne une expérience de navigation frustrante.
Un site complexe peut contenir une quantité excessive d’informations présentées sur une seule page. Cela peut rendre difficile la recherche d’informations spécifiques et entraîner une surcharge cognitive pour les utilisateurs. Processus d’achat ou d’inscription complexe : Si le site propose des fonctionnalités d’achat.
Un site complexe peut avoir une interface surchargée avec de nombreux éléments visuels, des bannières publicitaires, des animations et des widgets. Cela peut distraire les utilisateurs, rendre la lecture difficile et ralentir les performances du site.
Ajouter des fonctionnalités inutiles.
L’utilisation d’un produit peut déjà être complexe, il faut alors éviter toute fonctionnalité qui n’est pas en rapport avec le produit (météo, etc…).
Chaque fonctionnalité ajoutée augmente la complexité globale du site. Cela peut rendre la navigation et l’utilisation plus difficiles pour les utilisateurs, surtout s’ils sont confrontés à une surcharge d’options et de fonctionnalités dont ils n’ont pas besoin.
L’ajout de fonctionnalités inutiles peut entraîner une confusion pour les utilisateurs. Ils peuvent se demander pourquoi ces fonctionnalités sont présentes et comment les utiliser, ce qui peut nuire à leur expérience utilisateur et à leur compréhension globale du site.
Trop de fonctionnalités peuvent entraîner une surcharge visuelle, avec une interface encombrée et des éléments superflus. Cela peut rendre la navigation difficile, distraire les utilisateurs de l’objectif principal du site et créer une expérience visuellement désagréable.
Chaque fonctionnalité ajoutée peut avoir un impact sur les performances du site. Cela peut ralentir les temps de chargement, augmenter la consommation de ressources et entraîner une expérience utilisateur médiocre. Les utilisateurs peuvent être frustrés par les délais d’attente et être plus enclins à quitter le site.
2. La pyramide de l'UX.
La pyramide de l’UX, également connue sous le nom de hiérarchie des besoins de l’UX, est un modèle conceptuel qui illustre les différents niveaux de priorités dans la conception de l’expérience utilisateur. Ce modèle est souvent utilisé pour guider les concepteurs dans la création de produits ou de services centrés sur l’utilisateur. La pyramide de l’UX se compose généralement de cinq niveaux, allant de la base à la pointe :
Fonctionnalité : Le niveau de base de la pyramide de l’UX est la fonctionnalité. Il s’agit de s’assurer que le produit ou le service fonctionne correctement et remplit les tâches attendues par les utilisateurs. Les fonctionnalités de base doivent être stables, fiables et performantes.
Fiabilité : Le niveau suivant est la fiabilité. Cela signifie que le produit ou le service doit être prévisible et cohérent dans son fonctionnement. Les utilisateurs doivent pouvoir compter sur sa stabilité et sa capacité à fournir des résultats attendus sans erreurs ou dysfonctionnements.
Utilisabilité : Au-dessus de la fiabilité se trouve l’utilisabilité. Cela concerne la facilité d’utilisation et l’efficacité avec laquelle les utilisateurs peuvent accomplir leurs tâches. L’interface utilisateur doit être intuitive, claire et conviviale, facilitant la navigation et l’interaction.
Utilité : Le niveau suivant est l’utilité. Il s’agit de répondre aux besoins et aux objectifs des utilisateurs. Le produit ou le service doit fournir une valeur ajoutée et être utile pour résoudre les problèmes des utilisateurs ou satisfaire leurs besoins spécifiques.
Satisfaction : Le sommet de la pyramide de l’UX est la satisfaction. Il s’agit de créer une expérience utilisateur positive, agréable et mémorable. Les utilisateurs doivent ressentir une satisfaction émotionnelle en interagissant avec le produit ou le service, ce qui peut contribuer à la fidélité, à la recommandation et à l’engagement continu.
La pyramide de l’UX met en évidence l’importance de répondre d’abord aux besoins fonctionnels de base, puis de progresser vers des niveaux supérieurs pour créer une expérience utilisateur complète et satisfaisante.
C. Design et innovation.
Pour un projet novateur, il faut vérifier qu’il est viable dans son ensemble afin de ne pas être confronté aux problèmes suivants :
- Personne ne l’utiliser
- Personne ne va le construire
- Personne ne va le financer
D. Concevoir L’UX en prenant en compte les utilisateurs.
Pour la réalisation du projet, il faut prendre en compte les utilisateurs ou les futurs utilisateurs.
Création de fiche persona.
Les personas représentent un groupe de personnes imaginaires, et plus précisément un segment d’audience caractérisé par certaines spécificités propres aux utilisateurs cibles. Ces stéréotypes décrivent le profil type des internautes qu’une entreprise veut avoir. Grâce à ces échantillons d’utilisateurs, il est plus facile pour les designers et concepteurs UX d’avoir une meilleure compréhension de l’audience et d’y adapter les bonnes stratégies de conceptions et de développements de l’expérience utilisateur.
Grâce aux personas, il devient plus aisé de faire émerger les attentes et les besoins potentiels des utilisateurs finaux, d’ajuster et personnaliser les contenus et les actions, d’affiner les parcours UX, pour optimiser au final la qualité globale de l’expérience utilisateur.
Les personas sont généralement créés au début d’un projet, néanmoins ils peuvent évoluer tout au long du processus.
Cartographie de l’UX.
La cartographie de l’UX, aussi appelée UX mapping ou UX map, est le processus visant à créer, étape par étape, une représentation visuelle de l’expérience vécue par les utilisateurs sur un site web. Le but est de comprendre leur cheminement vers un objectif donné.
Il peut y avoir plusieurs objectifs et plusieurs manières de les atteindre. En effet, pour un même objectif final, le flux et les chemins empruntés peuvent être radicalement différents. Une carte de l’UX est donc une représentation des interactions de l’utilisateur dans son parcours.
L’Empathy Map, le User Journey, l’Experience Map et le Service Blueprint font partie des outils d’analyse de l’expérience client les plus couramment utilisés. Chacune de ces méthodes possède ses propres objectifs. Les utiliser en complément les unes des autres est le meilleur moyen d’avoir une image complète et fiable du comportement des utilisateurs.
Les règles de base de l'UI.
Les bases de l’UI Design reposent sur trois grands principes.
La mission de l’UI Designer est très simple (et compliquée à la fois), il doit travailler sur les aspects visuels de l’interface afin d’offrir la meilleure expérience possible aux utilisateurs. La meilleure ne veut pas dire « la plus belle », mais la combinaison d’une expérience claire et simple avec une interface agréable et bien conçue.
a. Le design de marque, le Branding.
Il va se baser sur l’identité visuelle de la marque ou en créer une de A à Z.
Votre site ou votre application, c’est la continuité de votre identité visuelle, vous diffusez votre image via ces outils numériques.
Par conséquent, un UI Designer doit toujours respecter la charte graphique d’une marque : le logo, les couleurs, les typographies, les icônes ou les illustrations.
Ainsi, votre utilisateur sera capable de facilement faire le lien entre la marque et l’interface, l’ensemble sera cohérent et rassurant pour lui.
b. Le design d'information.
L’autre principe de base sur lequel travaille l’UI Design tourne autour du design d’information. Grosso modo, cela regroupe tous les éléments liés à l’information textuelle (titraille, texte, liens, CTA…). Et ensuite, il faut être capable de hiérarchiser ces éléments pour faciliter la lecture. Le but est de ne pas surcharger une page avec trop d’éléments, il faut créer de l’espace négatif (de l’espace vide), mais pas trop non plus !
Il faut ensuite que tous ces éléments soient bien visibles, que les éléments importants soient bien mis en avant et que ceux qui sont secondaires ne prennent pas le dessus. Pour y parvenir, on joue sur les couleurs, les contrastes, les espacements, la typographie, etc.
Et bien entendu, tous ces éléments, s’ils sont réutilisés, doivent l’être de la même manière. Comme pour le branding, on respecte les mêmes codes graphiques. Par exemple, si votre CTA d’abonnement est jaune avec un typo noire, vous devez garder le même code graphique sur l’ensemble de votre site (bien sûr vous pouvez adapter la taille). C’est très important pour la bonne compréhension des informations et pour améliorer l’expérience.
c. Le design d'information.
Dernier principe de l’UI Design, et pas des moindres : l’interaction. Le but est de guider l’utilisateur et faciliter sa navigation, optimiser son parcours. Quand on parle d’interaction, on pense à tous les éléments cliquables : que ça soit un CTA, un champ de formulaire, un lien ou même une icône.
L’UI Designer doit donc rendre tous ces éléments reconnaissables par l’utilisateur. Ce dernier doit comprendre qu’il peut interagir avec un élément. Et c’est là généralement qu’on va miser sur l’affordance. C’est un terme courant pour tout UI ou UX Designer. L’affordance c’est une caractéristique d’un élément (mais ça vaut aussi pour un objet) qui suggère à l’utilisateur son mode d’usage ou la façon d’interagir avec. On peut prendre l’exemple des poignées de porte, certains vont suggérer à l’utilisateur qu’il faudra « pousser » ou « tirer ». Et quand c’est mal fait… Je vous laisse repenser à toutes ces personnes que vous avez vu galérer au moment où il fallait ouvrir la porte.
Mais il n’y a pas que l’affordance qu’il faut prendre en compte, mais également la zone de clic. En particulier sur les interfaces mobiles, il faut qu’un élément puisse être facilement cliquable en fonction de la taille d’un doigt ou d’un pouce. Mais cela vaut aussi sur le web, si un utilisateur souhaite dérouler un menu dans une barre de navigation il faut lui laisser une marge de manœuvre et ne pas rendre la zone cliquable microscopique.
Voir le cours complet sur Open Class Room.
Partie 1 – Voyez ce qui se cache derrière l’UX
Partie 2 – Concentrez-vous sur l’utilisateur
Partie 3 – Découvrez le métier d’UX designer
Partie 4 – Entraînez-vous à la pratique de l’UX design