đŸ€” Qu'est-ce que l'UX/UI Design ?

Mis à jour le :  

29/2/2024

GĂ©nĂ©ralement quand je prĂ©sente mon mĂ©tier (UX/UI Designer donc), je suis confrontĂ©e Ă  deux types de rĂ©actions : ceux qui connaissent dĂ©jĂ  (parce qu’ils ont quelqu’un de leur entourage dans ce domaine ou qu’ils ont dĂ©jĂ  travaillĂ© avec un UX/UI Designer) et ceux qui me regardent avec des yeux remplis d'incomprĂ©hension đŸ˜¶. 

Je reformule donc souvent en webdesigner, designer digitale ou encore tout simplement crĂ©atrice de site web. Ajoutons Ă  cela que prononcer rapidement la phrase “je travaille dans l’UX” peut prĂȘter Ă  confusion 🔞 et on a perdu tout le monde


‍

Je vais donc expliquer ici ma dĂ©finition personnelle de l’UX/UI Design.

‍

Ma dĂ©finition personnelle de l’UX/UI Design

Commençons par le commencement : UX et UI Design sont deux acronymes qui correspondent respectivement Ă  User eXperience et User Interface. Bon, c’est vrai qu’on n’est pas beaucoup plus avancĂ© avec tout ça

En fait, UX Design et UI Design sont deux domaines distincts, pouvant ĂȘtre pratiquĂ©s par une seule et mĂȘme personne. NĂ©anmoins, certains professionnels sont uniquement spĂ©cialisĂ©s en UX ou en UI.

‍

L’UX Design se concentre sur l’expĂ©rience utilisateur, l’accessibilitĂ© et l’ergonomie du site. L’objectif est de permettre Ă  un utilisateur de n’avoir aucun blocage, du moins le moins de freins possibles, lorsqu’il effectue une tĂąche sur un site (comme par exemple acheter un produit sur un site e-commerce). 

L’UI Design se focalise quant Ă  lui plutĂŽt sur l’aspect visuel du site, en intĂ©grant des Ă©lĂ©ments graphiques et d’identitĂ© visuelle : c’est la conception de l’interface avec laquelle l’utilisateur va finalement interagir.

‍

En rĂ©sumĂ©, l’UX et l’UI sont deux Ă©tapes du processus de crĂ©ation d’un site web (ou de sa refonte) et sont complĂ©mentaires l’une de l’autre. 

‍

‍

Quelles différences entre UX et UI Design ?

Pour aller un peu plus dans le détail de mon métier, voici des exemples que ce je réalise au quotidien en UX Design et en UI Design.

‍

En tant qu’UX designer, je rĂ©alise des audits ou des interviews utilisateurs 💬 afin de dresser un Ă©tat des lieux de l’existant et d’amĂ©liorer l’utilisabilitĂ© d’un site web. 

Il s’agit de comprendre les utilisateurs, leurs comportements et leurs prĂ©fĂ©rences. Pour cela on utilise frĂ©quemment le principe des personas (qui correspondent Ă  une ou des personnes fictives, proches des prĂ©occupations des vrais utilisateurs đŸ™‹â€â™€ïžđŸ€·â€â™‚ïž). Cela permet de toujours orienter ses rĂ©flexions en fonction des besoins des utilisateurs et ne pas se fier uniquement Ă  son instinct. 

Exemple de persona pour une application de voyage/road trip (rĂ©alisĂ© notamment grĂące Ă  l’outil d’HudSpot)
Exemple de persona pour une application de voyage/road trip (rĂ©alisĂ© notamment grĂące Ă  l’outil d’HudSpot)

‍

Pour concevoir un site, on commence donc gĂ©nĂ©ralement par l’UX Design. AprĂšs avoir rĂ©alisĂ© des recherches sur les utilisateurs, on dĂ©finit l’arborescence du site (quelles pages crĂ©Ă©es et comment l’utilisateur va naviguer de page en page) et on rĂ©alise des wireframes plus ou moins dĂ©taillĂ©s. Les wireframes sont neutres, souvent en nuances de gris, et permettent de dĂ©finir plus prĂ©cisĂ©ment le contenu et les sections de chaque page.

‍

💡 Les Wireframes (de l’anglais, fil de fer) sont un schĂ©ma de la structure et des fonctionnalitĂ©s du site. Ils donnent une premiĂšre image simplifiĂ©e de l’interface et permettent de repĂ©rer les erreurs Ă©ventuelles avant d’aller plus loin. Leur simplicitĂ© les rends trĂšs faciles Ă  modifier et Ă  corriger. 

‍

A gauche un wireframe - A droite, la mĂȘme page sous forme de maquette graphique

Exemple de wireframe
Exemple de maquette graphique

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍En UI design, je vais d’abord crĂ©er ou faire une refonte de l’identitĂ© visuelle selon les besoins de mon client. Parfois, il s’agit juste d’adapter celle-ci aux contraintes du web. 
L’avantage c’est que l’on peut rĂ©aliser cette Ă©tape en mĂȘme temps que les premiĂšres rĂ©flexions UX.

On peut ensuite s’appuyer sur les wireframes pour rĂ©aliser des maquettes graphiques, qui intĂšgrent justement l’identitĂ© visuelle et permettent d’agencer graphiquement les diffĂ©rents Ă©lĂ©ments qui vont composer le site web đŸ–Œïž. 

‍

L’étape suivante consiste soit Ă  l’intĂ©gration du site soit, pour approfondir les tests de design, Ă  l’animation des maquettes graphiques. Les maquettes deviennent alors un prototype avec lequel on peut interagir comme sur le site final.

‍

Un résumé visuel des différences entre UX et UI Design juste au-dessus ! ©Graffersid.com

‍

‍

Pourquoi faire appel Ă  un UX/UI Designer ?

Je pense que tu l'as compris, crĂ©er un site web nĂ©cessite de passer par de nombreuses Ă©tapes pour concevoir un site qui correspond vraiment aux besoins de tes utilisateurs et que tu ne trouves pas juste beau personnellement (👋 bye bye l’instinct, les goĂ»ts personnels et parfois les fausses croyances). 

‍

L’avantage de travailler avec un UX/UI designer, c’est que tu es avec quelqu’un qui t’accompagne de bout en bout pour te guider, te donner des recommandations et surtout te faciliter la tñche.

C’est typiquement un domaine oĂč on a envie de mettre la main Ă  la pĂąte, mais dĂ©lĂ©guer permet souvent de gagner un temps prĂ©cieux et d’éviter certaines erreurs courantes ! 

‍

Les petits bonus

‍

Revenir aux ressources