L’UX/UI Design

On ne va pas se mentir, à chaque fois que je prononce cette phrase, je suis toujours obligé de l’accompagner avec une description plus ou moins détaillée pour expliquer ce que je fais vraiment. C’est vrai que c’est un métier un peu méconnu auprès du “grand public”, pourtant essentiel à la production d’un produit web (site, logiciel, intranet, etc).

Je vais donc, si vous le voulez bien, prendre quelques minutes de votre temps pour vous expliquer mon métier, pourquoi mon rôle est important dans le processus de création et la différence entre UX et UI Design.

UX/UI Design : explications

Pour vous expliquer plus facilement ce qu’est l’UX/UI Design, je vais vous poser une question : Imagineriez-vous construire votre future maison sans plan d’architecte validé avant ?

Sans vouloir trop m’avancer, je pense connaître votre réponse. Il paraît inimaginable de passer directement à l’étape de construction sans se fier à des mesures, des spécificités, des plans précis, que ce soit pour l’extérieur ou l’intérieur. Sans tout ça, il y aura forcément des problèmes de conception, des couacs, des choses mal anticipées bref, une maison mal conçue et loin d’être à la hauteur de vos attentes.

Et bien dans le web, c’est exactement la même chose. Avant de passer à l’étape de développement d’un logiciel par exemple, il y a besoin de préparation, de réflexion, de tests pour arriver à quelque chose d’utile, pertinent et intuitif pour l’utilisateur final.

La différence entre UX et UI

Même en travaillant dans le domaine du web, certaines personnes ont du mal à différencier les deux. Bien qu’étroitement liés, l’User Experience (UX) et l’User Interface (UI) ont chacun leurs spécificités. Dans certaines entreprises, il y a même des designers spécialisés dans l’un ou l’autre.

L’User Experience (UX)

Pour continuer ma comparaison avec la maison, j’aime dire que l’UX est l’équivalent des plans d’architectes. Définir les proportions des pièces, anticiper les déplacements d’une pièce à l’autre, penser de manière à ce que la maison soit fonctionnelle et pratique (passer par la salle de bain pour aller à la cuisine ne serait pas très logique et assez contraignant).

Pour un logiciel, c’est sensiblement la même chose : définir l’architecture globale, segmenter les différentes parties pour organiser le tout de façon claire et intuitive, imaginer les différents chemins utilisateur possibles, faire en sorte que tout soit simple et fluide pour l’utilisateur final … C’est l’UX Design !

L’User Interface (UI)

Après les gros oeuvres finis, vient maintenant l’étape de décoration d’intérieur. Avoir quelque chose de fonctionnel c’est bien, mais si en plus il est joli et agréable à l’oeil c’est encore mieux, n’est-ce pas ?

Pour un produit web, c’est encore une fois la même chose. Avec l’UI, je vais m’intéresser à tous les paramètres graphiques : la ou les couleur(s) principale(s), le style des boutons, le typographie, les icônes, les images, les formulaires, les illustrations et j’en passe !

Tous ces éléments sont très importants pour la compréhension de l’interface. Certains codes peuvent jouer sur l’inconscient pour faire passer des messages précis. Par exemple, une phrase écrite en rouge va plutôt être synonyme de message d’erreur. À l’inverse une phrase verte sera un message de confirmation ou d’action réussie.

En plus de faire passer des messages plus simplement, le but de l’UI Design est de retrouver une cohérence graphique à n’importe quel endroit d’un produit, aussi vaste qu’il puisse être. Faire en sorte que le tout soit agréable à regarder et à utiliser.

Mon rôle en tant qu’UX/UI Designer chez Ascanio

Dans un projet web, j’interviens après les premiers rendez-vous avec le client et avant la phase de développement. Je rassemble un maximum d’informations pour m’imprégner du domaine en question. J’essaye de me l’approprier, comprendre pourquoi et comment je dois imaginer le produit final. 

Dans un premier temps, mon rôle est de faire des recherches pour comprendre les attentes, les besoins, les craintes ou encore les habitudes de l’utilisateur final. L’exercice est de trouver le juste milieu entre toutes ces variables, les bonnes pratiques du web et les tendances graphiques du moment. Le but est d’arriver à un produit le plus adapté possible à l’utilisateur, fonctionnellement développable tout en étant dans l’air du temps.

Quand j’estime avoir assez d’informations et d’éléments, je commence à travailler sur l’UX du produit (souvenez-vous, les gros oeuvres de la maison). Pour toujours plus structurer les choses, je commence par concevoir les maquettes en ne m’attardant pas sur les détails graphiques. J’organise seulement les éléments de mes écrans en noir, gris ou blanc. Du plus sombre au plus clair en fonction de leur importance dans une page web. Cette étape s’appelle le Wireframing.

Après l’UX, vient l’UI ! (la décoration d’intérieur)

Une fois que la phase de wireframe terminée, il faut “passer un coup de peinture” et définir graphiquement tous éléments qui vont composer les interfaces. En commençant la base des bases, les couleurs et la typographie.

Ensuite viennent les premiers éléments : boutons, listes, cases à cocher, champs de saisie, qui eux-mêmes composeront des éléments plus gros comme un article de blog, un filtre de prix, un menu, un formulaire avec plusieurs champs de saisie…
Avec tous ces éléments, je peux enfin construire entièrement les pages du produit final. C’est l’étape de maquettage. Mes collègues s’amusent à dire que c’est l’étape du “coloriage”, inutile de vous dire qu’ils ne comprennent rien à rien…ces ploucs.