#UX #UI design #design thinking#experience utilisateur #CTNews

Si vous faites partie de cette population qui utilise encore le mot « webdesign », alors cet article est fait pour vous. Il est grand temps de faire un reboot de votre conception du design d’interface et d’oublier ce mot valise. Et oui ! Aujourd’hui, on parle d’UX et d’UI design, UX design = User eXperience = expérience utilisateur et UI design = User Interface = interface utilisateur

Le blog du Master Celsa-Mines vous explique ici comment distinguer ces deux concepts, à la fois différents et complémentaires. C’est parti !

 

L’UX design s’intéresse au contact de l’Homme avec le produit : la sensation dans les mains, la compréhension de son fonctionnement, l’accomplissement d’objectifs ou encore l’adéquation du produit avec le contexte. Il s’agit d’ergonomie. L’objectif de la démarche UX est de concevoir un dispositif qui corresponde à ses utilisateurs, et cela en les intégrant le plus tôt possible dans le processus de création, en concevant pour eux et avec eux. L’UX n’est pas spécifique au design d’interface, il s’applique également au design d’objet, d’espace, bref, tout ce que vous voulez.

L’UI design correspond à l’aspect visuel, artistique et esthétique du produit : quelles couleurs utiliser, quelle typographie, style photographique, formes graphiques, etc. L’UI, c’est la séduction, la cerise sur le gâteau, l’emballage cadeau. Bien réalisé, il peut produire le « wow effect ».

Puisqu’une image vaut mieux que mille mots, la photographie ci-dessous montre bien la différence entre UX et UI design. La route a été façonnée dans un objectif esthétique (UI) mais n’a pas pris en compte les besoins et habitudes des piétons (UX) qui, en conséquence, ont créé leur propre chemin.

L’UX et l’UI design sont deux choses différentes mais complémentaires. Associer les deux est primordial pour concevoir un produit à la fois fonctionnel et esthétique.

La marque Heinz l’a bien compris. Voici l’évolution de leur bouteille de sauce tomate, avant et après avoir pris en compte l’expérience de leurs consommateurs :

 

L’UX et l’UI appliqués au design d’interface web

Nous y venons. Adios le mot « webdesign » : soyez précis !

Entre le brief du commanditaire et la livraison d’une maquette d’interface web, le chemin à parcourir n’est pas si évident qu’il n’y parait. Comme le montre l’illustration ci-dessous, la maquette visuelle n’est que la partie finale et émergée de l’iceberg.

Définition de la stratégie

Tout projet de conception nécessite d’être correctement délimité. Après le premier rendez-vous avec le commanditaire, il faut trouver une idée et définir sa stratégie, son business plan. Il faut déterminer si le concept est économiquement viable et si cela vaut le coup d’être développé. La réunion de lancement a pour mission de comprendre l’environnement économique et les enjeux, de s’informer sur l’existant et de définir les objectifs du projet.

Phase de cadrage

Durant la phase de cadrage, les UX designers vont réaliser des enquêtes auprès des utilisateurs cibles pour connaître leurs profils types (personas), leurs besoins et habitudes (« experience map »), et déterminer la meilleure manière d’y répondre.

Les personas sont des représentations des futurs utilisateurs, sous la forme de personnages fictifs, qui permettent d’avoir une vision imagée, concrète, tangible et partagée des utilisateurs. Ils aident également à élaborer des scénarios d’usage.

L’ « experience map » repose sur ces personas et permet d’identifier leurs motivations, leurs actions, besoins et émotions au cours du temps. C’est une méthode complémentaire à celle des personas, auxquels elle donne vie.

Création de la structure de l’interface

Lorsque le projet est validé et que l’on a toutes les connaissances nécessaires à propos du contexte et des utilisateurs, il est nécessaire de recenser toutes les fonctionnalités et le contenu qui sera disponible sur l’interface. On parle alors de « hiérarchisation de l’information ».

Le squelette de l’interface

Ensuite, l’UX designer peut passer au maquettage en basse résolution. C’est ce que l’on appelle « wireframes ». Il s’agit de concrétiser tous les écrans et leur enchaînement, et de positionner les éléments (texte, boutons, zones des images, sections, …) sur les pages. Lors de cette étape, il ne faut pas se préoccuper du design mais s’intéresser au contenu et son accessibilité. Le parcours utilisateur doit être clair.

Phase de design

Lorsque les wireframes ont été validés (par l’équipe interne et avec le commanditaire), les UX designers transmettent leurs maquettes aux UI designers, qui vont rajouter les couleurs, les textures, les images, … en bref, rendre le site attrayant.

L’évaluation comme mot d’ordre

Nous l’avons évoqué précédemment, le design est un processus extrêmement itératif. Lorsque la version 0 est terminée, les UX designers effectuent des tests utilisateurs. Cette phase consiste à tester la qualité des solutions produites directement auprès des utilisateurs. Les informations recueillies permettent de valider ces solutions ou d’identifier des problèmes et de proposer des recommandations pour son amélioration. Cela aboutit à la création d’une V2 qui sera également évaluée et modifiée jusqu’à ce que la maquette corresponde parfaitement aux besoins des utilisateurs. « Echouer vite pour réussir plus tôt » est un principe clé du design UX.

De nombreuses méthodes d’évaluation existent : la complétion de phrases, les échelles d’utilisabilité, l’évaluation des émotions, l’inspection cognitive, le test des 5 secondes, … La méthodologie UX n’est pas fixée dans le marbre. Chaque designer et chaque entreprise est libre de conduire ses enquêtes en fonction de ses besoins.

L’UX et l’UI design sont ainsi des notions incontournables dans le domaine de la création numérique, mais pas seulement. Les entreprises comprennent qu’il ne faut plus créer pour le client mais pour l’utilisateur, et tendent à modifier leurs modèles pour être plus « user centric », en adoptent de nouvelles méthodes comme le « design thinking » notamment.

 

Le blog du Master Celsa-Mines t’a aidé à y voir un peu plus clair ? N’hésite pas à donner ton avis en commentaires !

 

© UX Store on Unsplash