UX et UI design : connaissez-vous les différences entre ces deux concepts ?

Connaissez-vous les différences entre les concepts d’UX design et d’UI design ? Découvrez notre article pour être incollable sur le sujet.

Est-ce qu’il vous est déjà arrivé(e) de parcourir une application web et de vous faire une des remarques suivantes : « Le site est très agréable, c’est fluide ! », « Quel enfer pour trouver l’information qu’on cherche ! » ?

Si oui, alors vous avez touché du doigt l’UX design et l’UI design sans même le savoir ! Ces deux concepts sont très importants lorsqu’on souhaite développer une application web. On parle d’Expérience Utilisateur pour l’UX design et d’Interface Utilisateur pour l’UI design.

Si ces mots vous semblent un peu barbares pour l’instant, pas de panique. Vous y verrez plus clair à l’aide de notre article complet sur les différences entre l’UX ET L’UI design.


L’UX et l’UI design au cœur de la conception de votre projet digital

Lorsqu’on crée une application web, on souhaite que tout le monde puisse l’utiliser facilement. L’adoption massive d’une application est comme une sorte d’accomplissement. Vous avez travaillé dur pour développer ce projet et son utilisation est signe de reconnaissance.

Pour que cette adoption soit la plus massive possible, vous devez garder en tête que votre application doit être agréable à parcourir visuellement d’abord, qu’elle soit ergonomique dans un second temps afin que l’internaute puisse trouver rapidement l’information qu’il recherche.

Ce sont les concepts d’UX design et UI design et il est important de ne pas les confondre. Ces deux aspects techniques sont complémentaires, voire indissociables. Chacun de ces concepts a des différences par rapport à l’autre.

Airbnb, Uber, Tripadvisor, City mapper : pourquoi ces applications sont-elles utilisées par des millions de personnes ? Une partie de la réponse est sans nul doute grâce à des interfaces utilisateurs et des expériences utilisateurs très soignées.


L’UX design ou l’expérience utilisateur

Le principe même de l'UX design va être de répondre précisément aux besoins des utilisateurs lors de l’utilisation d’une application web. Pour mener à bien cette mission, il faut donc bien comprendre à qui l’on s’adresse (qui sont vos utilisateurs), qu’est-ce qu’ils souhaitent faire et comment ils souhaitent le faire.

L'UX designer va donc analyser le comportement des utilisateurs, identifier les points de friction et ainsi concevoir des solutions pour les résoudre.

Par exemple lorsque vous ouvrez votre application préférée pour commander un VTC, l’UX designer a fait le choix de vous proposer en priorité un plan géographique avec l’ensemble des véhicules se trouvant à proximité de vous. Tous les éléments de l’application sont organisés de manière à ce que vous trouviez rapidement ce que vous cherchez.

Une panoplie d’outils pour l’UX designer

Pour comprendre les comportements des utilisateurs, l’UX designer aura notamment recours à des tests utilisateurs. Ce sont des scénarios types d’une utilisation de l’application comme :

« Recherche un billet d’avion sur l’application puis télécharge ton billet sur ton téléphone »

L’objectif est de comprendre le cheminement de l’utilisateur pour aller du point A au point B et réaliser la tâche demandée.

L’UX design nécessite des compétences techniques avec la maîtrise de logiciels de prototypage comme Figma, Adobe XD, Sketch ou encore Invision mais également d’autres compétences comme l’écoute et l’empathie afin de pouvoir se mettre à la place de l’utilisateur, l’esprit critique pour être force de proposition afin d’améliorer les choses et également la créativité.

Savoir travailler en équipe est essentiel pour faire ce métier. En effet, l’UX designer est amené à travailler en étroite collaboration avec d’autres corps de métiers comme le design graphique ou encore le développement logiciel et la recherche utilisateur

L'UX design s'applique à une variété de domaines, y compris les applications mobiles, les sites web, les logiciels, les appareils électroniques et plus encore.


L’UI design ou l’interface utilisateur

Si l’UX design se concentre sur le comportement de l’utilisateur, l’UI design va davantage s’attarder sur l’environnement visuel de l’application. En effet pour qu’un utilisateur reste sur l’application et l’utilise le plus souvent possible (on parle alors de rétention), les éléments visuels jouent un rôle très important.

Pour mener à bien sa mission, l’UI designer dispose d’une palette d’outils assez importante. Le professionnel peut ainsi jouer avec la typographie de l’application, avec les couleurs des menus, avec les icônes et plus globalement avec tous les éléments visuels avec lesquels les utilisateurs interagissent. L’expérience visuelle doit être esthétiquement agréable et inciter l’utilisateur à poursuivre sa navigation.

Le métier d’UI designer fera appel à des qualités et à une sensibilité artistique, à de l’imagination et bien sûr à de la créativité. On demande également à ces professionnels de maîtriser les outils de création graphique tels que la suite Adobe (Photoshop et Illustrator notamment). Comme l’UX designer, l’UI designer doit savoir travailler en équipe et être à l’écoute des feedbacks internes afin d’améliorer régulièrement l’identité visuelle de l’application ou du site web.


Entourez-vous de vrais professionnels

Vous l’aurez compris, malgré leurs différences, l’UX et l’UI design sont très complémentaires voire indissociables dans le cadre de votre projet d’application web. Pour ne pas manquer ces étapes et voir votre application désertée par les utilisateurs, n’hésitez pas à vous entourer de vrais professionnels qui maîtrisent ces concepts.

Au sein de notre studio UX / UI design, notre équipe travaille en complémentarité sur ces sujets afin de garantir la meilleure expérience sur votre application web. Nous avons fait le choix d’internaliser des Product designer autant à l’aise sur l’UX design que sur l’UI design afin de proposer une expérience optimale et vous accompagner vers la réussite de votre projet.

Définition de la vision produit, étude de marché, synthèse des tests utilisateur, ateliers UX dans nos locaux : bénéficiez de l’expertise de notre studio et confiez-nous dès aujourd’hui la création de votre projet d’application !

Sommaire
Nos autres catégories
Notre newsletter tous les mois :
Je m'abonne
Merci ! C'est dans la boîte :)
Oops! Something went wrong while submitting the form.
Partager sur :
Nos autres catégories
Notre newsletter tous les mois :
Je m'abonne
Merci ! C'est dans la boîte :)
Oops! Something went wrong while submitting the form.
Partager sur :

Nos experts vous parlent
Le décodeur

Construire un story mapping en 4 étapes clés
30/8/2023

Lors d’un précédent article, nous vous parlions des différences entre UX et UI design ainsi que de leur complémentarité pour garantir le succès du développement d’un projet digital. Ces deux concepts n’ont désormais plus de secrets pour vous.

Le Product Designer - aussi à l’aise sur l’UX qu’avec l’UI design - a donc de nombreuses responsabilités. Parmi elles, nous pouvons citer le story mapping ou l’user story mapping. Il s’agit ni plus ni moins de poser à plat l’intégralité des fonctionnalités de la future application qui vont répondre aux besoins identifiés des utilisateurs. Ce process se fait en plusieurs étapes bien structurées.

Dans ce nouvel article, nous vous proposons de découvrir ce process en 4 étapes distinctes et dans quelle mesure il peut impacter favorablement votre projet de création d’application web.

Pensez à mettre Yield Studio en favori dans le cadre de votre projet de développement de produit digital !

❓ Comment et quand se déroule un story mapping ?

Nous conseillons généralement de réaliser le story mapping au cours d’ateliers de brainstorming. Concrètement, les parties prenantes suivantes peuvent se retrouver autour de la table :

  • l’équipe produit tout d’abord dont le Product Owner
  • les développeurs qui vont être sollicités dans le cadre du développement du projet
  • le client
  • et parfois mêmes les utilisateurs types du produit

Chez Yield Studio, notre accompagnement par notre studio UX / UI design comprend 2 jours d’ateliers dans nos bureaux. C’est à ce moment-là que nous réalisons entre autres le story mapping.

Voici selon nous les étapes clés pour construire un story mapping efficace.

👋 EXEMPLE A SUIVRE AU FIL DE L'ARTICLE
Afin que vous puissiez visualiser toutes les étapes, prenons l’exemple d’une entreprise française qui souhaite créer une application mobile disponible sur iOS et Android pour gérer ses finances simplement. L’application sera dotée d’un agrégateur de comptes bancaires.

Définition de l’objectif

Avant même d’entrer dans le vif du sujet et même si cela peut paraître évident, parlons de la définition de l’objectif. Pour pouvoir embarquer toutes les parties prenantes dans le projet, l’objectif principal du développement de l’application doit être partagé à tout le monde et doit surtout être bien compris.

C’est selon nous la base pour garantir le succès du projet. Pour notre exemple d’application bancaire, l’objectif principal pourra être le suivant : « Les utilisateurs doivent pouvoir gérer simplement leurs finances depuis une seule et même application mobile ».

🔎 Étape 1 : identifier ses utilisateurs ainsi que leurs besoins et leurs attentes

L’identification des utilisateurs et de leurs besoins est primordiale. C’est pour répondre à leurs besoins que vous allez développer votre projet digital. Il est donc capital que vous arriviez à vous mettre le plus possible à la place de vos utilisateurs pour comprendre leur cheminement de pensée. C’est grâce à ce premier travail que vous serez en capacité de proposer le meilleur produit.

L’élaboration des personae est un excellent moyen pour comprendre la philosophie de vos utilisateurs, leurs comportements et leurs attentes. Les personae sont créés à partir de données réelles collectées auprès des utilisateurs ou basées sur des recherches et des analyses.

Attention : selon la complexité du projet, il se peut que vous deviez définir plusieurs personae qui auront des attentes et des besoins différents.

Dans notre exemple et après avoir réalisé des tests utilisateurs, ces derniers nous ont partagé leur souhait : 
- regrouper plusieurs comptes bancaires de banques différentes sur une seule et même application
- réaliser des virements facilement entre ces banques
- gérer son budget intelligemment grâce à un outil dédié

✍️ Étape 2 : créer des user stories efficaces

Les besoins de vos utilisateurs sont identifiés et vous avez construit vos personae au plus proche du terrain ? C’est le moment de créer des scénarios utilisateurs et d’y intégrer leurs besoins.

L’user story - ou récit utilisateur - est la traduction littéraire d’une fonctionnalité logicielle qui va répondre au besoin spécifique d’un utilisateur. 

Dans notre exemple, l’user story pourrait être la suivante : « Chaque semaine, je consulte les soldes de mes comptes bancaires pour m’assurer que je ne suis pas à découvert ». 
- Dès l’ouverture de l’application, je visualise le solde de mon compte bancaire principal (banque A)
- Je peux consulter facilement les soldes de mes autres comptes bancaires (banques B et C par exemple)
- Je paramètre une notification d’alerte quotidienne lorsque le solde d’un de mes comptes est bas 

L’user story doit donc couvrir l’ensemble des besoins de l’utilisateur du début de son utilisation de l’application mobile jusqu’à la fin de son utilisation.

🔼 Étape 3 : prioriser les tâches en fonction de leur urgence et de leur complexité

Lors de cette troisième étape, notre travail consistera à transformer les besoins en tâches actionnables qui seront ensuite développées par l’équipe de développement web.

La priorisation des tâches se fait grâce à l’user story map avec :

  • sur l’axe horizontal : les étapes du parcours de l’utilisateur. C’est ce qu’on appelle le flot de narration.
  • sur l’axe vertical : le niveau de temporalité / priorité. En effet certaines fonctionnalités seront indispensables à l’usage du produit par rapport à d’autres qui seront moins prioritaires.
Dans notre exemple précédent, la fonctionnalité indispensable sera celle de pouvoir consulter en temps réel le solde de l’ensemble des comptes bancaires de l’utilisateur. Au contraire, la fonctionnalité de pouvoir paramétrer des alertes push sera moins urgente.

Cette étape pouvant être délicate, notre équipe est là pour vous accompagner.


🧐 Étape 4 : analyser puis itérer

Ça y est, le projet est enfin lancé, toutes nos félicitations ! Vous pensez que le travail est terminé ? Et non ! L’étape d’analyse et d’itération est capitale puisqu’il vous faudra analyser les retours des utilisateurs et mettre des actions en place en conséquence.

En effet selon leurs retours, des modifications plus ou moins importantes pourront être apportées sur le projet. Dans notre exemple, il sera opportun de placer au sein de l’application des boites de dialogue ou de contact afin que les utilisateurs puissent facilement faire leurs remarques et suggestions. 

Voici les 4 étapes clés pour construire un story mapping dans le cadre du développement d’un projet digital (application web par exemple). Ce travail est nécessaire afin de s’assurer que votre application réponde favorablement aux besoins de vos utilisateurs.

Au cours de ces étapes, mieux vaut être accompagné(e) par des professionnels. En choisissant Yield Studio, vous confiez votre projet à des professionnels du Product Design qui maîtrisent le story mapping ainsi que les méthodes agile et méthodes Scrum.

Contactez notre équipe dès aujourd’hui !

Méthode Scrum et méthodes agiles : le combo efficace pour garantir le succès de votre projet

Chez Yield Studio, nous attachons une grande importance au travail bien fait. Pour ce faire, nous avons adopté très tôt la méthode Scrum et la méthode agile pour la réalisation des projets digitaux de nos clients.

Avec la méthode Agile, nos équipes travaillent de manière transverse et adoptent un cadre de travail souple, efficace et en amélioration permanente. D’ailleurs, les équipes produit des plus grandes entreprises françaises adoptent cette philosophie au quotidien : Wedoogift, ManoMano, Deezer, etc.

Avec la méthode Scrum, nous mettons l’accent sur la flexibilité, la collaboration et la livraison régulière de fonctionnalités de grande valeur. Scrum est conçu pour permettre aux équipes de développement de s'adapter rapidement aux changements et de fournir des résultats concrets de manière itérative.

La méthode Scrum incite à la transparence, à l'adaptation et à la collaboration des équipes tout au long du projet. Cette méthodologie de travail permet de répondre aux changements rapides des exigences du client et de garantir que le produit final soit aligné sur les besoins réels des utilisateurs.

Les dark patterns en UX
4/12/2023

Dark Patterns dans l'UX Mobile : Un Paradoxe Éthique pour le Product Designer Actif

En tant que product designer spécialisé dans les applications mobiles, je suis plongé dans un monde où l'UX est essentiel pour le succès d'une application. Cependant, la montée en puissance des dark patterns m'oblige à réfléchir sur la manière dont elles influent sur la conception, l'efficacité commerciale, et surtout, l'éthique de mon travail. Dans cet article, je vais partager mon opinion en tant que product designer mobile, en explorant les nuances des aspects négatifs et positifs liés aux dark patterns, en utilisant des exemples concrets pour illustrer mes points.

Les Dark Patterns sous un Regard Critique

En tant que product designer, les dark patterns me laissent souvent perplexe. D'une part, je reconnais l'efficacité immédiate de ces tactiques pour générer des conversions et optimiser les parcours utilisateurs. D'un autre côté, il est difficile de ne pas ressentir une certaine réticence éthique face à la manipulation intentionnelle des utilisateurs.

Prenons l'exemple des pop-ups de notifications excessives, conçues pour inciter les utilisateurs à activer les notifications push. Bien que cela puisse initialement augmenter l'engagement, cela peut également entraîner la désactivation rapide des notifications et une perte de confiance de la part de l'utilisateur, qui se sent contraint et envahi.

Également certains compliquent délibérément le processus d'opt-out. Par exemple, la dissimulation du bouton de désinscription dans de petits caractères en bas d'une page peut rendre difficile la sortie d'un service, créant ainsi de la frustration et une expérience utilisateur négative.

Les Points Positifs

En tant que product designer travaillant dans le domaine des applications mobiles, je ne peux ignorer l'impact positif immédiat des dark patterns sur les taux de conversion. Prenons l'exemple d'une interface qui utilise des "fausses critiques" pour inciter à l'achat.

J’ai souvent rencontré ces pratiques dans mon travail ce qui m'a conduit à une réflexion plus profonde sur l'éthique de la conception. Cela a renforcé ma responsabilité en tant que designer pour trouver d’autres  solutions beaucoup plus créatives qui engagent les utilisateurs sans recourir à des manipulations. Egalement certains réduisent intentionnellement les options de désinscription, ce qui force l'utilisateur à rester engagé. Cette manipulation peut augmenter les statistiques d'engagement à court terme, mais elle peut également entraîner des retours négatifs et une perte de confiance.

Naviguer entre Efficacité et Éthique

En tant que product designer, l'équilibre entre efficacité et éthique est essentiel. Le défi consiste à concevoir des expériences utilisateur engageantes sans perdre la confiance des utilisateurs. Il est crucial de maintenir une transparence et de favoriser des pratiques de conception éthique. L'avenir de la conception mobile réside dans la capacité à créer des expériences qui ne fonctionne pas seulement par leur efficacité immédiate, mais qui construisent également une relation de confiance durable avec les utilisateurs.

source : https://www.atipik.ch/fr/blog/definition-dark-patterns-design-ux

source : https://www.leptidigital.fr/ux/dark-pattern-deceptive-designs-31257/

Échangeons
sur votre projet !

Nous contacter

Simulateur

Bienvenue dans le
simulateur d’estimation

Sélectionnez
vos besoins

Sélectionnez un ou plusieurs choix

Définissez les
fonctionnalités

Sélectionnez un ou plusieurs choix

Dernière
étape !

Renseignez votre adresse mail pour recevoir l’estimation !
Obtenez l’estimation
Précédent
Suivant

Bravo ! Vous avez terminé
l’estimation de votre future app !

Vous recevrez dans votre boite mail l’estimation personnalisé. Une estimation vous offre la possibilité de vous projeter dans un budget, vous permettant ainsi de planifier en toute confiance. Néanmoins, chez Yield, nous adoptons une approche agile, prêts à remettre en question et ajuster nos évaluations en fonction de l'évolution de vos besoins et des spécificités de votre projet.
Retour au site
Oops! Something went wrong while submitting the form.