7b704e03-eb93-46f2-beb4-80a785a3d789_Les_bases_de_lUXUI_numrique_(10H).pdf
Transcript
🔖 Les bases de l'UX/UI numérique (10H) Ce que vous apprendrez Suivre le processus de conception : faire preuve d'empathie à l'égard des utilisateurs, définir les points douloureux, imaginer des solution...
🔖 Les bases de l'UX/UI numérique (10H) Ce que vous apprendrez Suivre le processus de conception : faire preuve d'empathie à l'égard des utilisateurs, définir les points douloureux, imaginer des solutions, créer des wireframes et des prototypes, tester et faire évoluer les conceptions Comprendre les bases de la recherche UX, comme la planification des études de recherche, la conduite d'entretiens et d'études d'utilisabilité, et la synthèse des résultats de la recherche Identifier les éléments incontournables de l'expérience utilisateur (persona, usabilité, affordance…). Procéder à une recherche utilisateur pertinente. Mobiliser les bonnes pratiques de prototypage en vous adaptant aux changements de la société. Concevoir un produit en prenant en compte les besoins et les contraintes. Utiliser les outils de zoning, de maquettage et d'interaction les plus adéquats. Module 1 : Se familiariser avec l’UX et l’UI (1h) L’expérience utilisateur Qu'est-ce que l'UX ? L’UX design (User Experience design ou design de l'expérience utilisateur) est le processus par lequel les équipes de conception créent des produits qui offrent des expériences significatives et pertinentes aux utilisateurs. En d’autres termes, l'UX se concentre sur la manière Les bases de l'UX/UI numérique (10H) 1 dont les utilisateurs interagissent avec un produit, un service ou une entreprise dans sa globalité. Le design UX ne se limite pas à la création d’un produit ou d’un site web. Il s’étend à toutes les étapes du parcours utilisateur, incluant l’acquisition du produit, son intégration, son utilisation, ainsi que tous les éléments associés tels que le branding, l'ergonomie, et la fonctionnalité. Par exemple, il peut inclure la manière dont le produit est présenté lors d'une campagne marketing, l’expérience de déballage, ou encore le support après-vente. Le rôle principal du designer UX est de fournir des solutions qui répondent aux besoins et aux points de friction des utilisateurs. Un produit, quel qu'il soit, n'aura aucune valeur s’il ne répond pas à un besoin réel. C'est pourquoi le design UX implique une boucle de rétroaction continue entre les utilisateurs et les concepteurs. Grâce aux tests et recherches utilisateurs, les designers UX identifient les points de douleur et les zones à améliorer, ce qui permet d'affiner le produit au fil du temps. Les fondamentaux du design UX Le design UX repose sur l'interaction entre l'utilisateur et le produit. L’objectif est de concevoir des expériences qui soient non seulement fonctionnelles, mais aussi agréables et intuitives. Cela implique de comprendre en profondeur les attentes des utilisateurs, grâce à des recherches poussées, et d’appliquer ces connaissances à chaque aspect du design, qu’il s’agisse d’un site web, d’une application mobile ou même d’un objet physique. La dimension psychologique est fondamentale. Pour que votre produit soit apprécié, il doit toucher aux besoins profonds des utilisateurs, ce qui nécessite une connaissance approfondie de ces derniers. Historiquement, les premiers professionnels de l'expérience utilisateur étaient souvent des experts en psychologie, ethnologie, statistique ou analyse. De nos jours, ces spécialités continuent parfois à collaborer avec les designers. Les grandes entreprises, conscientes de l'importance des nouveaux usages et des attentes des clients, ont compris la valeur ajoutée des UX designers. C'est pourquoi elles intègrent désormais ces experts pour améliorer leur offre et répondre aux besoins de leurs utilisateurs. Même Les bases de l'UX/UI numérique (10H) 2 si aujourd’hui, il est principalement utilisé dans le domaine du numérique, le concept de l’UX peut s’étendre à tout ce qui implique une interaction, que ce soit une lampe de rue, une voiture ou une étagère Ikea. Pourquoi l'UX est-il essentiel ? Le design UX est souvent la clé du succès d’un produit ou d’une marque. En offrant des solutions adaptées aux besoins réels des utilisateurs, une entreprise peut améliorer considérablement la fidélité et la satisfaction de ses clients. Par exemple, un processus de paiement fluide sur un site de e-commerce ou une navigation intuitive sur une application bancaire peuvent grandement améliorer l’expérience et pousser les utilisateurs à revenir. Prenez en compte les besoins L'UX est liée à l'émotion On sait aujourd'hui, grâce aux neurosciences, qu'émotion et cognition sont indissociables dans une expérience de découverte et d'utilisation : si le produit vous plaît, vous allez vouloir continuer à l'utiliser, parfois à tel point que vous ne pourrez plus vous en passer. Il est crucial de mettre de côté vos propres opinions et d'accepter ce que vous entendez et observez afin d’apporter la réponse la plus adapter aux besoins des utilisateurs. Avoir de l'empathie dans le design signifie comprendre les utilisateurs : non seulement leurs besoins, mais aussi leurs contraintes et le contexte global de leur situation. L'empathie envers les utilisateurs potentiels est essentielle à chaque étape du processus de design thinking. Le design empathique est une approche centrée sur l'utilisateur qui se concentre sur les sentiments des utilisateurs envers un produit. Il répond aux besoins réels des utilisateurs, plutôt qu'à des "moyennes" supposées. L'un des principaux objectifs de la phase d'empathie est d'identifier les besoins et les comportements des utilisateurs qui sont latents, c'est-à-dire non exprimés. Le besoin latent est souvent décrit Les bases de l'UX/UI numérique (10H) 3 comme un besoin que les clients ne savent pas qu'ils ont, tandis qu'un besoin non exprimé est un besoin qui n'est pas énoncé ou exprimé. Vous avez plusieurs méthodes pour construire votre design empathique comme les entretiens d’empathie, l’immersion et observation ou encore l’interaction avec des utilisateurs extrêmes. Plus vous réfléchissez à la manière dont vos utilisateurs pourraient se comporter d'une certaine façon et pourquoi, plus vous pourrez vous identifier à eux (et concevoir pour eux !). https://www.ted.com/talks/margaret_gould_stewart_how_giant_we bsites_design_for_you_and_a_billion_others_too?utm_campaign=te dspread&utm_medium=referral&utm_source=tedcomshare Vous avez la possibilités de changer les sous-titres et la partie transcription en 26 langues. Que retenez vous de cette intervention ? Quelle est la principale leçon tirée de la refonte du bouton "Like" de Facebook ? A) Les petits détails n'ont pas d'importance dans le design à grande échelle B) Il est essentiel de négliger les contraintes techniques pour des designs plus créatifs C) Les petits éléments de design ont un impact significatif lorsqu'ils sont vus par des milliards de personnes D) Les grandes innovations de design doivent être réservées aux éléments visuels majeurs uniquement Réponse correcte : C) Comment la recherche et les données influencent-elles le processus de design selon le texte ? Les bases de l'UX/UI numérique (10H) 4 A) Elles remplacent complètement l'intuition et l'empathie du designer B) Elles sont utilisées uniquement pour valider les choix de design faits sans recherche C) Elles aident à affiner le design, mais ne peuvent pas remplacer l'intuition et l'empathie humaines D) Elles sont secondaires par rapport à la créativité dans le design Réponse correcte : C) Quel est un des aspects critiques à prendre en compte lors de l’introduction de changements dans un produit utilisé par de nombreux utilisateurs ? A) Maximiser le budget de publicité pour le changement B) Introduire le changement sans consultation préalable pour éviter les critiques C) Gérer le changement avec une extrême prudence pour minimiser la frustration des utilisateurs D) Modifier uniquement les éléments esthétiques sans impacter la fonctionnalité Réponse correcte : C) Pourquoi est-il important pour les designers de comprendre les conditions de vie des utilisateurs internationaux ? A) Pour adapter les designs aux préférences locales uniquement B) Pour améliorer la visibilité des produits dans les médias internationaux C) Pour s'assurer que les produits fonctionnent bien dans des contextes variés D) Pour réduire les coûts de production en fonction des régions spécifiques Réponse correcte : C) Interface pour l'utilisateur Les bases de l'UX/UI numérique (10H) 5 Bien que le domaine du design d'interface utilisateur soit plus ancien et plus pratiqué, la question « Qu'est-ce que le design d'interface utilisateur ? » reste difficile à répondre en raison de sa grande variété de malentendus. Tandis que l'expérience utilisateur (UX) regroupe des tâches centrées sur l'optimisation d'un produit pour une utilisation efficace et agréable, le design d'interface utilisateur (UI) est son complément ; il concerne l'aspect visuel, la présentation et l'interactivité d'un produit. L'UI : La Facette Visuelle de l'UX L'UX (expérience utilisateur) englobe à la fois des éléments visibles et invisibles qui, ensemble, façonnent l'expérience globale de l'utilisateur avec une application mobile. L'UI (interface utilisateur) représente la partie "visible" et "perceptible" d'un produit : c'est ce que nous voyons, entendons et touchons lorsque nous utilisons une application mobile, par exemple. La partie émergée de l'iceberg représente l'UI, tandis que l'iceberg dans son ensemble symbolise l'UX. Les bases de l'UX/UI numérique (10H) 6 Contrairement à l'UX, le design d'interface utilisateur est un terme strictement numérique. Une interface utilisateur est le point de contact entre l'utilisateur et un dispositif ou un produit numérique—comme l'écran tactile de votre smartphone ou le pavé tactile que vous utilisez pour sélectionner le type de café que vous souhaitez dans une machine à café. En ce qui concerne les sites web et les applications, le design UI considère l'apparence, la sensation et l'interactivité du produit. Il s'agit de s'assurer que l'interface utilisateur d'un produit est aussi intuitive que possible, ce qui implique de réfléchir attentivement à chaque élément visuel et interactif que l'utilisateur pourrait rencontrer. Un designer UI réfléchira aux icônes et aux boutons, à la typographie et aux schémas de couleurs, à l'espacement, aux images et au design réactif en veillant à ce que le design soit cohérent, harmonieux et esthétiquement plaisant. Travailler dans l’UX Que fait un designer UX ? Les designers d'expérience utilisateur (UX) sont responsables de l'apparence et de la convivialité d'un produit, site web ou application. Ils collaborent avec des équipes de chefs de produit, designers UI, rédacteurs et développeurs pour créer des écrans haute fidélité et des prototypes représentant l'apparence et le fonctionnement du produit une fois lancé. Quelques tâches quotidiennes ou projets que vous pourriez réaliser en tant que designer UX incluent : Recherche Utilisateur Collecte et analyse de données auprès de l’audience cible pour guider les décisions de design. Création de personas et cartographie des parcours utilisateurs. Wireframes Croquis simplifiés d’une application ou page web montrant la disposition des éléments de design. Permet d’ajuster la structure, la mise en page et les interactions. Les bases de l'UX/UI numérique (10H) 7 Architecture de l'Information Organisation et structuration du contenu pour faciliter la navigation. Assure que les utilisateurs trouvent rapidement et facilement l'information dont ils ont besoin. Designs Haute Fidélité Phase où les wireframes sont transformés en designs détaillés avec couleurs, typographie, images et interactions. Prototypes Modèles fonctionnels du design pour tester la convivialité sans coder. Permet d'observer les interactions réelles des utilisateurs. Tests de Usabilité Évaluation de la facilité et de l'efficacité d'utilisation du produit. Le designer UX configure les prototypes, crée des plans de test, recrute des participants et analyse les résultats. Revue et Analyse des Données Collecte et analyse de données significatives tout au long du processus pour éclairer les décisions de design futures. Quels outils les designers UX utilisent-ils ? En tant que designer UX, il est crucial de rester à jour avec les outils les plus récents pour maximiser l'efficacité et créer la meilleure expérience utilisateur possible. Les outils disponibles couvrent une large gamme de fonctionnalités, allant du prototypage à l'analyse et tout ce qui se trouve entre les deux. Certains outils standard de l'industrie que vous pourriez utiliser incluent : Figma Justinmind UXPin UserZoom UsabilityHub Les bases de l'UX/UI numérique (10H) 8 Les compétences d'un designer UX Le design UX nécessite un ensemble unique de compétences mêlant compétences techniques et relationnelles. Les compétences techniques comprennent : Maîtrise des outils de design standards comme Figma Recherche utilisateur Création de wireframes Prototypage Conception haute fidélité Analyse de données de base Principes de design visuel Les compétences relationnelles incluent : Collaboration et communication Gestion des tâches/projets Gestion du temps Compétences en présentation (importantes pour la recherche d'emploi et la collaboration en équipe) Exercice Exemple de la cafetière Produit : une cafetière moderne. Utilisateur : la personne qui prépare le café. UI : les boutons, l'écran, et les réglages de la cafetière. → Les boutons pour choisir la taille de la tasse, l'écran pour sélectionner le type de café, et les réglages pour ajuster l'intensité du goût sont des éléments visibles de l'interface utilisateur. Ce sont les parties avec lesquelles l'utilisateur interagit directement pour préparer son café. UX : faire du café. → Si les boutons sont intuitifs, si l'écran est facile à lire, et si le processus de préparation est fluide et agréable, alors l'expérience globale de l'utilisateur sera positive. Mais il y a d'autres aspects Les bases de l'UX/UI numérique (10H) 9 invisibles, comme le mécanisme de chauffe, la qualité de l'infusion, et l'entretien facile de la machine, qui contribuent également à l'expérience globale sans être immédiatement perceptibles. Exercice Conclusion Voici l'essentiel à savoir sur le design UX : Le design de l'expérience utilisateur est le processus de développement et d'amélioration de la qualité de l'interaction entre un utilisateur et tous les aspects d'une entreprise. Le design de l'expérience utilisateur est, en théorie, une pratique non numérique (science cognitive) mais est principalement utilisée et définie par les industries numériques. Le design UX ne concerne PAS les visuels ; il se concentre sur la sensation globale de l'expérience. Pour résumer ce qu'est le design UI : Les bases de l'UX/UI numérique (10H) 10 Le design d'interface utilisateur est une pratique purement numérique. Il prend en compte tous les éléments visuels et interactifs d'une interface produit, y compris les boutons, les icônes, l'espacement, la typographie, les schémas de couleurs et le design réactif. L'objectif du design UI est de guider visuellement l'utilisateur à travers l'interface d'un produit. Il s'agit de créer une expérience intuitive qui ne nécessite pas que l'utilisateur réfléchisse trop ! Module 2 : La place de l’utilisateur au sein de l’UX (2h - dont 1h de pratique) Introduction L'empathie joue un rôle crucial dans le design UX et est utilisée à différentes étapes du processus de design. Elle permet aux designers UX de se mettre à la place de leurs utilisateurs pour mieux comprendre leurs besoins, désirs et frustrations. Pour ce faire, les designers UX réalisent des entretiens afin de recueillir des connaissances approfondies sur les utilisateurs. Ces informations sont ensuite décomposées et utilisées pour créer des personas utilisateurs ainsi que des cartes d'empathie et des cartes de parcours. Les personas utilisateurs sont des représentations fictives mais réalistes de types d’utilisateurs typiques, mettant en avant leurs objectifs et motivations. Les cartes d'empathie visualisent les pensées, sentiments et actions d'un utilisateur, tandis que les cartes de parcours assurent que le flux utilisateur, le design et le contenu sont toujours alignés avec les besoins de l'utilisateur. Ces cartes sont partagées avec l'équipe élargie pour améliorer la collaboration et obtenir de nouvelles perspectives. Tout au long du processus de design, les designers UX sont encouragés à prendre des décisions basées sur des faits plutôt que sur des hypothèses. Un bon designer UX est celui qui est toujours conscient de ses propres biais et ne suppose pas que les utilisateurs pensent ou agissent comme lui. Persona dans le cadre UX Introduction aux personas UX Un persona UX est une représentation fictive mais réaliste d'un utilisateur d'une application ou d'un site web. Pour créer un persona, on Les bases de l'UX/UI numérique (10H) 11 s'appuie sur des données concrètes, comme les comportements observés et les nombreux entretiens réalisés avec des utilisateurs potentiels. L'objectif est de modéliser un utilisateur type qui reflète les besoins et les caractéristiques réelles des personnes qui utiliseront votre produit. La première étape du processus de conception consiste à développer une véritable empathie avec vos utilisateurs cibles. Cela signifie comprendre précisément ce qu'ils attendent de votre produit et quels problèmes ils cherchent à résoudre. En partant de ces insights, vous pourrez créer un persona qui guidera toutes les décisions liées à la conception de votre interface. Les caractéristiques du persona UX influencent directement la conception de l'interface numérique : de l'architecture du produit à son design en passant par le contenu. Le persona est essentiellement une compilation de profils d'utilisateurs ayant des points communs, tels que : Caractéristiques personnelles Besoins spécifiques Frustrations courantes Profils psychologiques Comportements typiques Et d’autres aspects pertinents L'idée est que, même si le concept d'un "utilisateur moyen" peut sembler abstrait, le persona vous aide à concrétiser et à visualiser les différents types d'utilisateurs auxquels vous vous adressez. Ainsi, vous pouvez concevoir de manière plus ciblée et efficace. Quel est l'intérêt d'établir des personas UX ? Une bonne expérience utilisatrice attire du trafic, et pousse les utilisateurs qui ont une bonne expérience à revenir. Pour créer une expérience utilisateur réussie, il est essentiel que vous conceviez en tenant compte des besoins et des attentes des personas, plutôt que de baser les choix sur nos propres préférences. Nous ne devons pas Les bases de l'UX/UI numérique (10H) 12 concevoir l'interface du produit numérique conformément à nos propres besoins et attentes car les décisions prises concernant l'architecture, les fonctionnalités, le design et les contenus d'un produit numérique doivent répondre à notre public cible. Voici quelques exemples concrets : Rédaction UX : Imaginez que vous êtes responsable du contenu pour une application de gestion de finances personnelles, et que votre persona est Paul, un jeune professionnel de 30 ans qui se sent perdu face à la complexité des outils financiers. Un message comme « Simplifiez vos finances en quelques clics ! Suivi automatisé, rapports clairs. » sur l’écran d’accueil peut immédiatement répondre à ses préoccupations et rendre l’utilisation de l’application plus attrayante. Architecture et User Flow : Supposons que vous concevez un site e-commerce destiné à Marie, une maman de 35 ans qui fait ses courses principalement via son smartphone pendant ses trajets quotidiens. Pour optimiser son parcours, il est important de s'assurer que le site est parfaitement responsive et que le processus de paiement est rapide et intuitif, avec des options de paiement facilement accessibles depuis un écran mobile. Confiance et Sécurité : Considérez Julie, une femme de 50 ans qui envisage de souscrire à un abonnement en ligne pour des cours de fitness. Avant de s’engager, elle veut être certaine de la qualité du service. En mettant en avant des avis de clients satisfaits, des témoignages vidéo, et un numéro de téléphone bien visible pour joindre un conseiller, vous pouvez rassurer Julie et améliorer son expérience utilisateur. En centrant le développement du produit autour des besoins du persona, vous pouvez vous assurer que votre communication est ciblée et que le produit répond précisément aux attentes de ses utilisateurs cibles. Autant en marketing nous parlons de buyer persona, autant dans l’ux nous le qualifions d’user persona. Les bases de l'UX/UI numérique (10H) 13 User Personas vs Buyer Personas : Les Différences Objectif des Personas : Pour le design UX, l'objectif est de créer une interface ou un produit qui correspond aux usages, attentes, contraintes et aspirations des utilisateurs, offrant ainsi une expérience « mémorable ». Les user personas sont testés par de vrais utilisateurs lors de tests ou d'audits post-lancement pour valider l'adéquation de l'interface. En revanche, les équipes marketing cherchent à convertir des prospects en clients fidèles en utilisant des stratégies adaptées aux différents types de leads, qu’ils soient prescripteurs ou utilisateurs finaux. Les buyer personas sont utilisés pour élaborer des stratégies de contenu et d’inbound marketing. Fondation des Personas : Du côté UX, les personas sont construits à partir d'une revue de littérature approfondie et d'une analyse des motivations et freins des utilisateurs. Les chercheurs UX examinent également les aspects psycho-sociologiques pour affiner l'ergonomie et l’utilisabilité de l’interface ainsi que le parcours utilisateur. Pour le marketing, les personas décrivent le client cible en fonction de ses caractéristiques socio-professionnelles et psychologiques, en lien avec le produit ou service proposé. Ils sont utilisés pour identifier les leviers d'acquisition et les obstacles à lever. Évolution des Personas : Une différence clé est que le buyer persona est statique une fois créé, servant une stratégie précise. Lorsque la stratégie change, les personas peuvent être remplacés pour aligner avec les nouvelles ambitions de l'entreprise. En revanche, le user persona est « itératif » dès le départ : il est élaboré par les chercheurs UX, validé par les clients, testé avec les utilisateurs et ajusté en fonction des retours réels. L’itératif implique une répétition continue avec des améliorations à chaque cycle. Comment créer un persona UX 1. Choisissez votre approche Les bases de l'UX/UI numérique (10H) 14 Tout d'abord, évaluez le temps et les ressources dont vous disposez. Idéalement, réalisez une recherche qualitative, même à petite échelle, pour baser vos personas UX sur des données réelles. Si vous devez créer des personas rapidement et avec des ressources limitées, commencez par la méthode des « proto-personas ». 2. Réalisez une recherche utilisateur Votre prochaine étape dépend de votre approche : recherche utilisateur ou méthode proto. Si vous optez pour la recherche utilisateur, planifiez et réalisez vos recherches en recrutant des participants, en créant des enquêtes et en préparant des questions d'interview. Pour la méthode proto-persona, organisez un atelier avec les parties prenantes clés dont vous souhaitez utiliser les idées. Pour plus d'efficacité, intégrez la création de personas dans l'atelier, en demandant à chacun de concevoir ses propres personas avant de les fusionner en une version finale. 3. Synthétisez vos recherches Si vous avez réalisé une recherche utilisateur, analysez les données recueillies pour identifier des modèles et des points communs. Cela vous aidera à distinguer différents types d’utilisateurs, principalement en termes de comportements : comment ces différents types d’utilisateurs interagissent avec votre produit ou votre problématique. 4. Donnez vie à votre persona UX Transformez vos découvertes en un persona UX concret. Commencez par créer un modèle de template qui définit les grandes lignes de votre persona UX ainsi que les informations clés à inclure. Les données suivantes sont notamment utiles : Âge, profession, niveau de revenus, situation familiale et lieu de résidence. Loisirs, activités sportives, centres d'intérêt. Habitudes de consommation et comportements d'achat. Traits de caractère. Les bases de l'UX/UI numérique (10H) 15 Niveau d'appétence et usages du digital. Informations à propos de l'utilisation du produit numérique : motivations et freins à l'utilisation. Une fois le modèle en place, commencez à le remplir pour donner vie à votre persona UX. N'oubliez pas d'ajouter une image et de nommer votre persona pour le rendre mémorable et relatable. Source Trip Mate Activité Genially Empathie La carte d'empathie est une représentation visuelle centrée sur l'utilisateur qui examine les sentiments qu’ils éprouvent vis-à-vis d'un produit, reflétant leur perception d'un produit ou service. Elle vise à répondre aux véritables besoins des utilisateurs plutôt qu'à des "moyennes" présumées. L'un des objectifs clés de cette étape est de Les bases de l'UX/UI numérique (10H) 16 découvrir les besoins et les comportements des utilisateurs qui sont latents ou non exprimés. Un besoin latent est un besoin que les clients ne réalisent pas qu'ils ont, tandis qu'un besoin non exprimé est un besoin qui n'a pas été clairement formulé ou exprimé. Pourquoi et quand utiliser une carte d'empathie ? Une carte d'empathie est employée pour plusieurs raisons : affiner la compréhension d'un sujet avant de créer une carte d’expérience, synthétiser les données qualitatives collectées, et aligner l'équipe sur une vision commune du comportement utilisateur. La carte d’empathie peut être utilisée à différents moments : Après la recherche utilisateur, pour cristalliser les résultats de cette recherche. Après la création d’un persona, pour l'enrichir, le valider auprès de l’équipe, et aligner les parties prenantes du projet. Si la recherche utilisateur n’a pas été réalisée, pour compenser le manque d’informations sur l’utilisateur. Comment faire un “empathy map” ? La carte d’empathie se divise en quatre dimensions autour du Persona : Le cerveau (THINK & FEEL) La vision (SEE) La parole et l’action (SAY & DO) L’ouïe (HEAR) Au centre de la carte, deux éléments de synthèse permettent d'extraire les frustrations, les points de friction et les irritants (PAIN), ainsi que les motivations, les objectifs et les bénéfices (GAIN). Les bases de l'UX/UI numérique (10H) 17 Case n° 1 : ce que l’utilisateur dit et fait (SAY & DO) Commencer par les faits est une bonne base de départ. Il est plus facile de rester objectif sur des éléments factuels plutôt que sur les ressentis de l’utilisateur. Reprenez les verbatims de votre recherche pour alimenter cette partie. DIT : "J'aimerais que les applications de livraison fournissent des estimations de temps plus précises." "le site web est lent" FAIT : Elle postait constamment sur Facebook jusqu'à ce qu'elle dise à tout le monde que c'était mal. Maintenant, elle l'utilise en secret pour espionner, mais ne poste plus. Ou Actualiser une page plusieurs fois. l'utilisateur se sert systématiquement de la recherche par mot-clés, alors que le site utilise plutôt la navigation ou les menus. Case n° 2 : ce que l’utilisateur voit (SEE) Les bases de l'UX/UI numérique (10H) 18 Si votre produit est un site web, l'utilisateur peut être confronté à une surcharge d'informations ou, au contraire, à une présentation essentiellement visuelle. Le site peut également présenter une complexité excessive, des éléments visuels trop envahissants ou des textes difficilement lisibles. Si votre produit est un portail apprenant, par exemple, l'utilisateur peut voir une interface bien structurée ou, au contraire, un design surchargé d'informations. Le portail peut être difficile à naviguer, avec des visuels peu attractifs ou des textes difficiles à lire. Pensez à ce que l’utilisateur perçoit avant de commencer à utiliser le portail, pendant qu'il interagit avec, et après son utilisation. Ce que l’utilisateur entend (HEAR) C’est tout ce que l’utilisateur peut entendre concernant votre produit. Des critiques ou des recommandations, ce que disent ses proches ou ses collègues. Par exemple, un nouvel employé arrive dans l'entreprise. On lui dit : “Tu verras, le portail apprenant est très compliqué à utiliser et les vidéos sont souvent obsolètes.” C'est ce qu'il entend dire sur l'outil, mais son expérience réelle lors de l'utilisation pourrait être complètement différente. À noter que les commentaires sur les réseaux sociaux concernant votre produit peuvent être inclus dans les catégories “HEAR” ou “SEE”, selon le contexte. Ce que l’utilisateur pense et ressent C’est la partie la plus délicate, car l’UX Designer peut tomber dans le piège de “je crois savoir ce que ressent l’utilisateur”. C’est la même chose pour les personnes du Service Marketing et du Service Client. Pour éviter ce biais, il faut exploiter sa recherche utilisateur, en particulier les interviews qui captent les ressentis. PENSE : Ce qui n'est généralement pas exprimé mais observé à travers des indices comme les expressions faciales. Par exemple : Un froncement de sourcils peut indiquer de l'agacement ou se pencher vers l'écran peut signifier des difficultés. Les bases de l'UX/UI numérique (10H) 19 RESSENT : Dans cette section, il faut mener une conversation ouverte. Par exemple : Comment vous êtes-vous senti lorsque vous avez essayé de passer votre commande sur l'application ? Case n° 5 et 6 : les frustrations (PAINS) et les motivations (GAINS) Les “pains” sont les points de friction et les problèmes rencontrés par l’utilisateur dans son utilisation du produit ou service. Les “gains” sont soit ses motivations profondes, soit ce qu’il retire comme bénéfices. Relisez à haute voix les 4 dimensions déjà faites, observez les tendances et pointez ce qui revient souvent. Déduisez-en les “pains et “gains” que vous reporterez dans les 2 dernières cases en bas du canevas. Par exemple, un point de douleur récurrent pourrait être la lenteur du site web ou l’impression de lenteur. Un point de motivation pourrait être des remises importantes sur le site de vente en ligne. L’utilisateur accepte que le site soit lent (pour lui), car la récompense compense cette frustration. https://www.ted.com/talks/rochelle_king_the_complex_relationshi p_between_data_and_design_in_ux?utm_campaign=tedspread&ut m_medium=referral&utm_source=tedcomshare Exercices Pour faire suite au contenu que vous venez de voir nous vous proposons de réaliser deux exercices. Ces exercices se baseront sur le brief du cas fil rouge. Exercice 1 : Réaliser votre propre persona, qui vous servira tout au long de l’année. Exercice 2 : Réaliser l’empathie map de votre persona. Boîte outil Les bases de l'UX/UI numérique (10H) 20 Carte-dempathie-vierge.pdf Module 3 : Connaissance des bases de la législation des droits d’auteurs (2h dont 1h de podcast) Introduction au Droit d'Auteur en UX Design “Le droit d'auteur est un pilier fondamental de la propriété intellectuelle, et son importance dans le domaine de l'expérience utilisateur (UX) ne peut être sous-estimée. En tant que professionnels du design UX, il est crucial de comprendre comment les principes du droit d'auteur s'appliquent à la création et à l'utilisation des éléments visuels et textuels dans les interfaces numériques. À chaque étape du processus de conception UX, qu'il s'agisse de la création d'une interface, de l'intégration de contenus multimédia, ou du développement de fonctionnalités interactives, le respect des droits d'auteur joue un rôle clé. Ce cadre juridique protège les œuvres originales contre la reproduction non autorisée et assure que les créateurs peuvent bénéficier de leurs innovations.” https://youtu.be/K53V_Yia79k La propriété intellectuelle La propriété intellectuelle (PI) englobe l'ensemble des droits associés aux créations telles que les inventions, les œuvres littéraires et artistiques, les noms commerciaux, les logos, les images et les designs. Ces droits protègent les intérêts des créateurs (inventeurs, auteurs, etc.) en leur conférant des droits exclusifs sur leurs œuvres. Ainsi, une même création peut bénéficier de plusieurs types de protection. Par exemple, un logo peut être protégé à la fois par le droit d’auteur et par le droit des marques. La propriété intellectuelle se divise en deux grandes catégories : Les bases de l'UX/UI numérique (10H) 21 La propriété industrielle, qui inclut les brevets, les marques, les dessins et modèles, les indications géographiques, les obtentions végétales et les topographies de produits semi-conducteurs. La propriété littéraire et artistique, comprenant les droits d'auteur, les droits voisins et les droits sui generis des producteurs de bases de données. Ces aspects sont régis par le Code de la propriété intellectuelle (CPI), qui établit le cadre législatif et réglementaire applicable à cette matière. La propriété intellectuelle dans le monde : Les règles nationales du droit de la propriété intellectuelle prennent appui sur des conventions internationales (notamment la Convention de Berne de 1886 et la Convention de Genève de 1952) qui viennent harmoniser les grands principes relatifs à la protection des œuvres de l’esprit et des droits des auteurs. Pour les pays signataires de ces conventions, l’auteur étranger sera assimilé à un national et bénéficiera de la même protection que celui-ci, sauf si la législation en vigueur est inférieure au minimum conventionnel. Dans ce cas, les dispositions de la convention de Berne viendront s’appliquer en « complément » de la loi locale. La protection est indépendante de l’existence de la protection dans le pays d’origine de l’œuvre. À noter : En vertu du système dit de « comparaison des délais », les États ont la possibilité d’allonger la durée de la protection au-delà du minimum prescrit par la convention. Or, si une œuvre cesse d’être protégée dans le pays d’origine, sauf disposition contraire de la loi nationale, la protection n’ira pas au-delà de cette durée. Qu’est-ce que le droit d’auteur ? Comme indiqué précédemment, le droit d’auteur, inscrit dans le Code de la Propriété Intellectuelle (CPI) à l’article L.111-1, est défini dans le cadre de la Propriété Littéraire et Artistique : « L’auteur d’une œuvre de l’esprit jouit sur cette œuvre, du seul fait de sa création, d’un droit de propriété incorporelle exclusif et opposable à tous. Ce Les bases de l'UX/UI numérique (10H) 22 droit comporte des attributs d'ordre intellectuel et moral ainsi que des attributs d'ordre patrimonial. » Prenons l'exemple d'une interface utilisateur (UI) conçue pour une application mobile. Le designer de cette interface détient les droits d’auteur sur les éléments graphiques, les mises en page et les éléments interactifs créés. Ainsi, personne ne peut utiliser ou modifier ces éléments sans l'accord du designer. Même si ces éléments sont conçus pour être vus et utilisés par les utilisateurs, le designer conserve le contrôle exclusif sur leur exploitation et leur reproduction. Que protège le droit d’auteur ? Le droit d’auteur protège toutes les œuvres de l’esprit, quels qu’en soient le genre, la forme d’expression, la destination ou le mérite. Le critère fondamental est celui de l’originalité, entendue comme « l’empreinte de la personnalité de son auteur ». La protection par le droit d’auteur confère au titulaire une exclusivité sur le droit d’autoriser ou d’interdire l’utilisation ou la réutilisation de son œuvre. Le droit d’auteur est le droit des créateurs. Ce droit comporte deux volets : les attributs d’ordre intellectuel et moral ; les attributs d’ordre patrimonial. Seuls les derniers peuvent être cédés ou concédés. Les droits patrimoniaux Champ de Protection Les droits d'auteur permettent de régir l'exploitation d'une œuvre et de définir la rémunération des titulaires de droits. Ils se subdivisent en deux catégories principales : Droit de représentation et de communication : Ce droit concerne la diffusion directe de l'œuvre au public, quel que soit le moyen utilisé (radio, télévision, sites web, etc.). Droit d'adaptation et de reproduction : Il porte sur la fixation matérielle de l'œuvre sur différents supports pour une communication indirecte au public (supports numériques, analogiques, papier, etc.). Les bases de l'UX/UI numérique (10H) 23 Durée de Protection Les droits d'auteur sont valables pendant 70 ans après la mort de l'auteur (ou du dernier coauteur). Pour les œuvres anonymes, pseudonymes et collectives, la protection dure 70 ans après leur première publication. Des prorogations exceptionnelles peuvent s'appliquer en cas de guerre, comme précisé dans les articles L. 123-8 et L. 123-9 du CPI. Domaine Public Après l'expiration de la période de 70 ans, l'œuvre entre dans le « domaine public » et peut être utilisée et réutilisée librement, à condition de respecter le droit moral. Les Droits Moraux Les droits moraux sont perpétuels, inaliénables, imprescriptibles, insaisissables et absolus. Ils comprennent les droits suivants : Droit de divulgation : L'auteur a le droit de publier ou de rendre son œuvre publique en premier. Ce droit est généralement confirmé par des accords tels que la signature de contrats avec l'auteur. Droit de paternité : L'auteur a le droit d'être reconnu comme le créateur de l'œuvre et de voir son nom associé à celle-ci. Ce droit peut être transmis à ses héritiers. Droit au respect de l'intégrité de l'œuvre : L'œuvre ne peut être modifiée, altérée ou déformée, ni dans sa forme ni dans son esprit. Ce droit peut également être transmis aux héritiers. Droit de repentir ou de retrait : L'auteur peut décider de mettre fin à l'exploitation de son œuvre ou d'en modifier les conditions. Durée de protection : Le droit moral persiste au-delà du décès de l’auteur. De plus, l’auteur ne peut pas y renoncer, ni le céder à un tiers, même s’il est prêt à le faire. Toute clause d’un contrat qui prévoirait le contraire est nulle juridiquement. Contenus Protégés par le Droit d’Auteur : Bien que la loi ne définisse pas précisément ce qu'est une œuvre de l’esprit, l'article L. 112-2 du CPI propose une liste non exhaustive des créations Les bases de l'UX/UI numérique (10H) 24 éligibles à cette protection. Ces créations incluent notamment : Les œuvres architecturales et picturales (bâtiments, œuvres commandées, etc.) ; Les logos ; Les logiciels ; Les bases de données ; Les études et expertises ; Les photographies et vidéos (y compris celles utilisées dans les communications publiques, les sites internet, les supports d’information, ainsi que les collections officielles de photos et vidéos) ; Les créations graphiques (chartes graphiques, contenus éditoriaux, etc.). Critères de Protection : D'après le Code de la propriété intellectuelle et l'analyse de la jurisprudence, les critères pour qu'un contenu soit protégé par le droit d'auteur se définissent comme suit : Concrétisation de la création : Le contenu doit se manifester sous une forme perceptible. Les idées non matérialisées ne sont pas protégées. Originalité : La création doit refléter l'« empreinte de la personnalité de l’auteur » et montrer que l’auteur a exercé ses capacités créatives en faisant des choix libres et créatifs, peu importe la forme d'expression, le mérite, le genre ou la destination de l'œuvre. Les contenus numériques peuvent être protégés par le droit d'auteur dès lors qu'ils répondent à ces critères et sont considérés comme des œuvres de l'esprit. Introduction à la Titularité des Droits d'Auteur dans le Contexte de l'UX Design En UX design, la titularité des droits d'auteur joue un rôle crucial, particulièrement lorsqu'il s'agit de créations collaboratives et de logiciels. Comprendre les principes de base de la propriété intellectuelle est essentiel pour garantir la protection des créations et éviter les conflits juridiques. Les bases de l'UX/UI numérique (10H) 25 I. Principe de Base de la Titularité des Droits En général, l'auteur de l'œuvre est le titulaire des droits d'auteur. Cela signifie que la personne ou les personnes sous le nom desquelles l'œuvre est publiée détient les droits sur cette création. Par exemple, un designer UX qui crée une interface utilisateur pour un logiciel est, en principe, l'auteur et donc le titulaire des droits associés à ce design. II. Complexités liées à la Pluralité d'Auteurs Lorsque plusieurs personnes participent à la création d'une œuvre, la titularité des droits peut devenir complexe. Voici les principales catégories : 1. Œuvre de Collaboration Définition : Créée par plusieurs personnes physiques ou morales. Droits : Chaque auteur est co-titulaire. Les décisions concernant l'exploitation ou la cession des droits doivent être prises collectivement. 2. Œuvre Composite Définition : Basée sur une œuvre préexistante. Droits : L'auteur de l'œuvre originale conserve ses droits, tandis que l'auteur de l'œuvre dérivée détient des droits définis par un accord avec l'auteur de l'œuvre initiale. 3. Œuvre Collective Définition : Initiée par une personne physique ou morale, avec des contributions indéterminables de chaque auteur. Droits : Les droits sont transférés à l'initiateur de l'œuvre. Il est recommandé de formaliser la cession des droits par un contrat pour éviter les litiges. III. Exceptions à la Titularité des Droits Certaines exceptions s'appliquent dans des contextes spécifiques : Sociétés de Développement de Logiciels Règle : Les droits patrimoniaux des créations réalisées par des employés sont automatiquement transférés à l'employeur, simplifiant ainsi la gestion des droits. Les bases de l'UX/UI numérique (10H) 26 Stagiaires et Auteurs Non-Salariés Règle : Les droits patrimoniaux des œuvres créées par des stagiaires ou des auteurs externes sont également transférés aux organisations ou sociétés qui les accueillent, même sans contrat de travail classique. Artistes face à l'IA : que reste-t-il du droit d'auteur ? Le Meilleur des mondes se penche sur les mutations du droit d'auteur et de la propriété intellectuelle liées à l'apparition des systèmes d'IA, notamment dans le secteur https://www.radiofrance.fr/franceculture/podcasts/le- meilleur-des-mondes/artistes-face-a-l-ia-que-reste-t-il-d u-droit-d-auteur-2298108 Podcast questions Quelle solution est suggérée dans le podcast pour résoudre les conflits entre droits d'auteur et technologies d'IA ? a) Créer des plateformes de partage de revenus automatisées b) Développer des systèmes de protection des œuvres basés sur la blockchain c) Imposer des restrictions plus strictes à l'IA d) Simplifier les procédures de dépôt de droits d'auteur Réponse correcte : b) Développer des systèmes de protection des œuvres basés sur la blockchain Quel est l’impact de l’IA sur la création artistique selon le podcast ? a) L’IA facilite la création d’œuvres originales b) L’IA déplace la créativité humaine au second plan c) L’IA encourage les artistes à explorer de nouveaux styles d) L’IA rend la création artistique plus accessible à tous Réponse correcte : b) L’IA déplace la créativité humaine au second plan Quel aspect du droit d'auteur est particulièrement remis en question par l'IA selon le podcast ? Les bases de l'UX/UI numérique (10H) 27 a) La durée de protection des œuvres b) La rémunération des artistes c) La définition de la paternité des œuvres d) Les droits de diffusion des œuvres Réponse correcte : c) La définition de la paternité des œuvres Module 4 : Techniques et fondamentaux de l'image numérique Connaissance des principes de l’image numérique bits La science de la théorie des couleurs Pour créer un bon design et utiliser les couleurs de manière plus efficace, il est essentiel de comprendre comment les couleurs se forment et comment elles interagissent entre elles. Nous allons explorer les bases de la théorie des couleurs et plus spécifiquement les combinaisons de couleurs qui peuvent être appliquées efficacement dans votre processus de création de design. Roue des Couleurs Si vous avez déjà pris des cours de peinture, vous avez sans doute entendu parler d’un cercle composé de différentes couleurs. La roue des couleurs aide visuellement à comprendre comment les couleurs se rapportent les unes aux autres et comment elles peuvent être combinées. Créée en 1666 par Isaac Newton de manière schématique, elle a subi de nombreuses transformations, mais reste un outil sur lequel vous pouvez vous appuyer pour les combinaisons de couleurs. L'idée essentielle est que la roue des couleurs doit être conçue de manière à Les bases de l'UX/UI numérique (10H) 28 ce que les couleurs se mélangent correctement. Il est généralement constitué de couleurs primaires, secondaires et tertiaires. Les couleurs primaires sont ces trois pigments qui ne peuvent pas être obtenus par la combinaison d'autres couleurs. En combinant les couleurs primaires, on obtient les couleurs secondaires, et le mélange de couleurs primaires et secondaires nous donne les couleurs tertiaires, qui portent souvent des noms à deux mots comme rouge-violet. Les bases de l'UX/UI numérique (10H) 29 Source Modèles de couleur Avant de commencer à mélanger les couleurs, il est essentiel de comprendre que la couleur a deux natures différentes : les couleurs tangibles, qui se trouvent à la surface des objets, et celles produites par la lumière, comme les faisceaux des écrans de télévision. Ces deux types donnent naissance à deux modèles de couleur : additif et soustractif. Le modèle de couleur additif considère le rouge, le bleu et le vert comme couleurs primaires, d'où son nom de système de couleurs RVB. Ce modèle constitue la base de toutes les couleurs utilisées sur les écrans. La combinaison des couleurs primaires en proportions égales Les bases de l'UX/UI numérique (10H) 30 produit des couleurs secondaires, qui sont le cyan, le magenta et le jaune. Il est important de se rappeler que plus on ajoute de lumière, plus la couleur devient brillante et claire. Les résultats obtenus par le mélange de couleurs additives peuvent souvent surprendre ceux qui sont habitués au système de couleur soustractif utilisé pour les peintures, teintures, encres et autres objets tangibles. Le modèle de couleur soustractif obtient ses couleurs par la soustraction de la lumière. Il comprend deux systèmes de couleur. Le premier RYB (rouge, jaune, bleu) a servi de base à la théorie moderne des couleurs, qui a déterminé que le cyan, le magenta et le jaune étaient le trio de couleurs le plus efficace à combiner. C'est ainsi que le modèle de couleur CMY a été formé. Il est principalement utilisé dans l'impression et, lorsque l'impression photomécanique a intégré de l'encre noire comme composant clé, le système a été nommé CMJN (cyan, magenta, jaune et noir). Sans ce pigment supplémentaire, la teinte la plus proche du noir serait un brun boueux. On reviendra plus en détail sur ces sujets dans la prochaine partie. Source Les bases de l'UX/UI numérique (10H) 31 Harmonie des couleurs L'harmonie des couleurs concerne l'agencement des couleurs dans un design de manière à ce qu'elles soient les plus attrayantes et efficaces pour la perception des utilisateurs. Lorsque les couleurs sont bien organisées, les spectateurs se sentent satisfaits et apaisés, tandis qu'une disharmonie dans le design peut donner une impression de chaos et de désagrément. L'équilibre des couleurs est crucial dans le design, car les utilisateurs se forgent une première impression d'un site web ou d'une application dès le premier coup d'œil, et les couleurs y jouent un rôle important. Les designers ont identifié plusieurs schémas de couleurs de base qui fonctionnent efficacement. Monochromatique Ce schéma utilise une seule couleur déclinée en diverses nuances et tons. L'harmonie monochromatique est un choix fiable, car elle minimise le risque de créer une palette de couleurs désagréable. Par exemple, une interface entièrement en bleu, allant du bleu ciel au bleu marine, peut créer une atmosphère apaisante et cohérente. Exemple d'application : L'application Calm, qui utilise différentes nuances de bleu pour créer une ambiance apaisante. Analogues Les bases de l'UX/UI numérique (10H) 32 Pour créer une harmonie analogique, il convient d'utiliser des couleurs adjacentes sur le cercle chromatique. Ce type de schéma est idéal pour les conceptions où le contraste n'est pas nécessaire, comme les arrière- plans de pages web ou de bannières. Par exemple, des nuances de vert, de vert-jaune et de jaune peuvent être utilisées ensemble pour un site sur la nature, offrant une apparence harmonieuse. Exemple d'application : L'application Spotify utilise des couleurs adjacentes sur le cercle chromatique pour ses playlists. Complémentaire Les bases de l'UX/UI numérique (10H) 33 Le schéma complémentaire mélange des couleurs opposées sur le cercle chromatique. Contrairement aux schémas analogiques et monochromatiques, celui-ci vise à créer un contraste élevé. Par exemple, un bouton orange sur un fond bleu est difficile à manquer dans n'importe quelle interface. Un autre exemple serait d'utiliser du rouge et du vert, souvent vu pendant les fêtes pour attirer l'attention sur des promotions. Exemple d'application : L'application Instagram, où les notifications rouges se détachent sur du fond. Complémentaire fractionné Ce schéma fonctionne de manière similaire au précédent, mais il utilise davantage de couleurs. Par exemple, en choisissant la couleur bleue, il faudra ajouter deux autres couleurs adjacentes à son opposé, c'est-à- dire le jaune et le rouge. Un exemple serait une affiche de film avec un titre bleu, entouré de nuances de jaune et de rouge pour attirer l'œil sans être trop agressif. Exemple d'application : L'application Trello, qui utilise des cartes bleues, jaunes et rouges pour organiser les tâches. Les bases de l'UX/UI numérique (10H) 34 Triadique Lorsque le design nécessite l'utilisation de plusieurs couleurs, vous pouvez envisager le schéma triadique. Il repose sur trois couleurs distinctes, également espacées sur le cercle chromatique. Pour maintenir l'équilibre, il est recommandé de désigner une couleur comme dominante et les autres comme accents. Par exemple, une palette comprenant le bleu, le rouge et le jaune peut donner une dynamique vivante, où le bleu est utilisé pour le fond, tandis que le rouge et le jaune servent d'accents pour les boutons et les titres. Exemple d'application : L'application Canva, qui utilise un schéma triadique avec du bleu, rouge et jaune dans ses modèles. Tétradique/Double complémentaire Le schéma tétradique est destiné aux designers expérimentés, car il est le plus difficile à équilibrer. Il utilise quatre couleurs du cercle, formant des paires complémentaires. En reliant les points des couleurs choisies, on obtient un rectangle. Par exemple, une combinaison de violet et jaune, accompagnée de bleu et orange, peut créer un design frappant pour un événement artistique, mais demande une attention particulière pour éviter un déséquilibre visuel. Exemple d'application : L'application Adobe Creative Cloud, qui utilise un schéma tétradique avec des couleurs vives pour son interface. La théorie des couleurs est une discipline complexe qui demande plus d'une journée d'apprentissage. Toutefois, il est essentiel de saisir les concepts fondamentaux pour concevoir des designs efficaces en étant conscient des choix que vous faites. Faites une mini analyse des couleurs de la charte graphique de l’application et partager là avec le reste des utilisateurs de la plateforme. Les bases de l'UX/UI numérique (10H) 35 Connaissance des différents modes colorimétriques Espaces Colorimétriques : Définition et Applications Un espace colorimétrique, ou gamut, définit une gamme spécifique de couleurs que chaque périphérique est capable de reproduire. Étant donné que aucun appareil ne peut afficher toutes les couleurs visibles à l'œil humain, il est crucial de faire correspondre les couleurs entre les différents dispositifs, comme les écrans et les imprimantes. Lorsque vous prenez une photo et souhaitez l'imprimer, le défi est de conserver la fidélité des couleurs entre l'écran et le papier. Chaque périphérique, que ce soit un écran ou une imprimante, a ses propres limitations et ne reproduit pas les couleurs de manière identique. Pour surmonter ce défi, plusieurs modèles de couleur sont utilisés pour coder les images numériques : RVB : Utilisé pour les écrans, ce modèle décrit les couleurs produites par des faisceaux lumineux. CMJN : Utilisé pour l'impression, ce modèle représente les couleurs obtenues par la superposition de différentes encres. Les médias numériques et imprimés Les bases de l'UX/UI numérique (10H) 36 Les créations sont visibles sur une variété de dispositifs et de supports, et la gestion des couleurs varie considérablement en fonction du média utilisé. Cela s'explique par les différences entre les espaces colorimétriques et les deux processus de production des couleurs additif et soustractif. Pour rappel : Additif : Ce processus implique le mélange de lumière. En combinant toutes les couleurs à pleine intensité, nous "créons" le blanc, tandis que le noir représente l'absence totale de couleur. Soustractif : Ce processus consiste à mélanger des substances physiques comme l'encre ou la peinture. Chaque application de couleur couvre le support. Vous avez peut-être constaté que les couleurs imprimées peuvent différer de celles affichées à l'écran. Cela se produit parce que les couleurs générées par l'imprimante (processus soustractif) ne reproduisent pas celles de l'écran (processus additif). Le spectre des couleurs additifs est plus large que celui du CMJN, ce qui explique pourquoi il est recommandé aux designers de convertir leurs projets au système de couleurs soustractif avant l'impression pour obtenir un résultat conforme à leurs attentes. En revanche, pour les produits numériques, le système de couleurs RVB est souvent le choix idéal, car il offre une large palette permettant de créer des rendus visuels saisissants. Choisir le Mode de Couleur Adapté au Contexte LAB (Luminosité, A pour l'axe vert-rouge, B pour l'axe bleu-jaune) : Ce mode, connu sous le nom de CIELab, repose sur la perception humaine des couleurs. Il comprend un canal pour la luminosité (L, de 0 à 100) et deux canaux de couleur (A pour l'axe vert-rouge et B pour l'axe bleu-jaune, allant de +127 à -128). L'un des principaux atouts du mode LAB est sa capacité à garantir une cohérence des couleurs à travers différents supports. Par exemple, si vous créez une application mobile et que vous souhaitez que votre logo apparaisse de la même manière sur une tasse promotionnelle, le mode LAB facilitera cette uniformité. Cependant, il est important de garder à l'esprit que des fichiers LAB volumineux peuvent entraîner des temps de chargement plus longs. Les bases de l'UX/UI numérique (10H) 37 RVB (Rouge, Vert, Bleu) Le modèle RVB repose sur la synthèse additive, où une large gamme de couleurs est créée en combinant trois composantes lumineuses dans des proportions variables. Par exemple, en ajoutant les trois couleurs à leur valeur maximale (255 pour le rouge, 255 pour le vert et 255 pour le bleu), on obtient le blanc. À l'inverse, l'absence totale de ces couleurs (R = 0, V = 0, B = 0) donne le noir. Ce système est exclusivement utilisé dans les formats numériques, comme sur les écrans de téléphones et d'ordinateurs. Bien que le RVB soit couramment présent sur divers dispositifs électroniques, la représentation des couleurs peut varier d'un appareil à l'autre, ce qui signifie qu'une image peut apparaître différemment selon la marque de l'écran. Lorsque vous concevez une interface d'application mobile, le choix du RVB est essentiel pour garantir des couleurs vives et engageantes. Imaginons que vous concevez une application de suivi de la santé. Dans cette application, vous utilisez le mode RVB pour créer un tableau de bord convivial et attrayant. 1. Couleurs des indicateurs de santé : Pour les indicateurs de santé, comme le rythme cardiaque et le niveau d'activité, vous pourriez utiliser des couleurs vives. Par exemple, un indicateur de rythme cardiaque normal pourrait être affiché en vert vif (R: 0, V: 255, B: 0), tandis qu'un rythme cardiaque élevé pourrait être rouge (R: 255, V: 0, B: 0). 2. Couleurs apaisantes pour les arrière-plans : Le fond de l'application pourrait être d'un bleu doux (R: 173, V: 216, B: 230) pour créer une atmosphère calme et rassurante, facilitant ainsi la concentration de l'utilisateur sur ses données. 3. Graphiques et visualisations : Les graphiques montrant les tendances de santé peuvent utiliser différentes teintes RVB pour représenter les données sur plusieurs jours, facilitant ainsi la compréhension des performances. Les bases de l'UX/UI numérique (10H) 38 En utilisant le mode RVB, vous vous assurez que les couleurs sont vives et engageantes sur les écrans, créant ainsi une expérience utilisateur agréable et intuitive qui facilite l'interaction avec l'application. CMJN (Cyan, Magenta, Jaune, Noir) : Le modèle CMJN utilise la superposition de pigments cyan, magenta et jaune pour créer des couleurs. Bien que théoriquement, cette combinaison devrait produire un noir pur en absorbant toute la lumière, elle donne souvent un brun foncé en raison des impuretés dans les encres. Pour obtenir un noir profond, on ajoute de l'encre noire, un procédé connu sous le nom de quadrichromie. Chaque pixel est attribué un pourcentage pour chaque couleur d'encre. Les tons clairs reçoivent de faibles pourcentages, tandis que les tons foncés en obtiennent des plus élevés. Par exemple, un rouge vif pourrait être composé de 2 % de cyan, 93 % de magenta, 90 % de jaune et 0 % de noir. Dans ce modèle, le blanc pur est obtenu lorsque toutes les valeurs des quatre composants sont à 0 %. Les bases de l'UX/UI numérique (10H) 39 Couleur indexée Ce mode génère des fichiers d'image en 8 bits, avec une palette maximale de 256 couleurs. Exclusivement numérique, il crée une table de couleurs pour indexer les teintes. Si une couleur n'est pas disponible, le logiciel sélectionne la plus proche ou simule celle-ci par tramage. Bien que limité, le mode couleur indexée réduit la taille des fichiers tout en préservant une qualité visuelle suffisante pour les présentations, sites web et applications mobiles. Il est idéal pour l'optimisation d'images, tandis que des modifications complexes nécessitent un passage temporaire au mode RVB. Les bases de l'UX/UI numérique (10H) 40 Niveaux de gris Ce mode exploite une gamme de nuances de gris pour représenter une image. Dans une image de 8 bits, on peut trouver jusqu'à 256 niveaux de luminosité, allant de 0 (noir) à 255 (blanc). Les images de 16 et 32 bits permettent une bien plus grande diversité de nuances. En impression, les niveaux de gris varient de 0 % (représentant le blanc) à 100 % (correspondant au noir), ce qui indique la quantité d'encre utilisée. Bitmap (ou art linéaire) Ce mode se compose uniquement de deux teintes : le noir et le blanc, sans inclure de nuances de gris. Les images en bitmap, également appelées images à 1 bit, se caractérisent par une profondeur de 1. Dans les formats numériques, les pixels sont définis par des valeurs de noir ou de blanc. En impression, ces images se forment par des points d'encre noire sur le papier. Bien qu'elles puissent sembler pixelisées à l'écran, elles s'impriment généralement de manière lisse et en haute qualité. Sémantique Les systèmes de couleurs sémantiques sont largement utilisés dans le design UI/UX pour garantir la cohérence au sein des systèmes de design. Ils assurent des palettes harmonieuses et un contraste adéquat, éléments essentiels pour une expérience utilisateur optimale. Cette approche vous offre un avantage considérable lors de votre collaboration avec des développeurs. En utilisant un système de couleurs commun, votre communication est plus fluide et l'implémentation plus efficace. Cette alignement simplifie le processus de transition du design au développement, réduit les erreurs et garantit que le produit final reflète fidèlement la vision initiale du design. Comprendre la nomenclature des couleur Les bases de l'UX/UI numérique (10H) 41 Les nuances de couleurs sont fréquemment désignées par des noms comportant des barres obliques et des chiffres, tels que blue/25 ou blue/900. Cette convention de nommage peut varier selon les systèmes de design, mais dans des outils comme Figma, les barres obliques indiquent des sous-dossiers. Les chiffres, comme 100, 200 et 300, sont utilisés pour organiser les teintes de manière efficace. Ils présentent plusieurs avantages : 1. Espace entre les chiffres : Des chiffres plus élevés permettent d'ajouter facilement des nuances intermédiaires. 2. Variété de nuances : Cela offre la possibilité de cataloguer de nombreuses teintes sans limite. 3. Facilité de mémorisation : Les nombres ronds sont simples à retenir. En général, un système typique pourrait indiquer que 100 correspond à un bleu très clair, 500 à un bleu moyen et 900 à un bleu foncé. Cela permet de visualiser rapidement les différences de teintes sans avoir besoin de voir chaque couleur. C'est un peu comme un escalier où chaque marche représente une nuance distincte de bleu. Définiton du hex code Reprenons notre brief, comme vous pouvez le voir chaque nom de couleur est accompagné d’un code composé de 7 éléments. Que représentent-ils ? Les codes de couleur hexadécimaux sont un type de code couleur HTML souvent désigné sous le terme de couleur hexadécimale ou simplement hex. L'utilisation de chiffres hexadécimaux permet de représenter des valeurs en code binaire, facilitant ainsi leur compréhension et leur utilisation. Les bases de l'UX/UI numérique (10H) 42 Les composants du code hexadécimal Les codes de couleur hexadécimaux commencent par un dièse (#) et sont suivis de six chiffres et/ou lettres. Les deux premiers caractères correspondent à la valeur rouge, les deux suivants à la valeur verte, et les deux derniers à la valeur bleue. Les valeurs de couleur sont exprimées entre 00 et FF (contrairement à l'échelle de 0 à 255 utilisée dans le système RGB). Les chiffres sont utilisés pour les valeurs de 1 à 9, tandis que les lettres représentent les valeurs supérieures à 9. Par exemple : A = 10 B = 11 C = 12 D = 13 Pour obtenir une couleur hexadécimale, vous pouvez suivre ces trois étapes : 1. Multipliez le premier chiffre par 16. 2. Multipliez le second chiffre par 1. 3. Additionnez les deux résultats. Qu'est-ce que les codes de couleur RGB ? Dans le système de couleur RGB, les couleurs sont représentées comme suit : Les bases de l'UX/UI numérique (10H) 43 RGB(255, 0, 0) Le format RGB définit les valeurs de rouge (premier chiffre), de vert (deuxième chiffre) et de bleu (troisième chiffre). Le chiffre 0 indique l'absence de couleur, tandis que 255 représente la concentration maximale de cette couleur. Par exemple, pour obtenir uniquement du vert, vous utiliseriez RGB(0, 255, 0) et pour du bleu, RGB(0, 0, 255). Pour d'autres couleurs, une combinaison de valeurs de couleur est nécessaire pour atteindre l'apparence souhaitée. Voici quelques exemples de codes de couleur hexadécimaux : Rouge = #FF0000 = RGB(255, 0, 0) Vert = #008000 = RGB(0, 128, 0) Bleu = #0000FF = RGB(0, 0, 255) Jaune = #FFFF00 = RGB(255, 255, 0) Blanc = #FFFFFF = RGB(255, 255, 255) Noir = #000000 = RGB(0, 0, 0) Les bases de l'UX/UI numérique (10H) 44 💡 Exercice code couleur Aller sur un site de votre choix Afin d’afficher les couleurs présentent sur le site cliquer droit puis inspecter Retrouver deux couleur hex, leurs équivalent en RGB ainsi que leur nom. Module 5 : Esthétique visuelle et composition Connaissance de la symbolique des formes et des couleurs (1h) Symbolique des formes Dans l'univers du design d'interfaces, comprendre la psychologie des formes est crucial pour concevoir des expériences utilisateur fluides et agréables. La manière dont les formes attirent l'attention sur des éléments importants, organisent l'information de façon intuitive et créent une hiérarchie visuelle cohérente est essentielle. De plus, ces formes influencent l'identité de la marque et ont la capacité de véhiculer des messages et des émotions. De quelle manière allez-vous appliquer ces principes dans vos propres projets de design ? La psychologie des formes Les bases de l'UX/UI numérique (10H) 45 Définition La psychologie des formes examine comment les formes géométriques et organiques affectent la perception et les émotions des utilisateurs dans le design d'interfaces. Chaque forme possède une signification distincte et peut susciter des réactions variées chez l'utilisateur. Les formes et l’UX Signification des formes La psychologie des formes joue un rôle crucial dans l'amélioration de l'expérience utilisateur au sein du design d'interfaces. Chaque forme a une signification propre qui peut influencer la façon dont un utilisateur perçoit et ressent l'interface. En explorant l'impact des différentes formes sur les émotions et les perceptions vous pouvez concevoir des interfaces plus attrayantes et agréables. Par exemple, l'utilisation de cercles, dépourvus d'angles et de lignes droites, peut rendre une interface plus accueillante et amicale, tandis que les carrés et les rectangles peuvent évoquer la précision et le professionnalisme. Une approche réfléchie qui intègre la psychologie des formes peut renforcer l'ergonomie, l'accessibilité et l'efficacité globale de l'interface, aboutissant ainsi à une expérience utilisateur améliorée. Quelles formes pourriez-vous utiliser sur le site Greenshelf pour influencer positivement vos utilisateurs ? Et le contexte culturel dans tout ça ? Les formes peuvent revêtir des significations variées selon les contextes culturels. Par exemple, le manji, souvent présent dans les temples japonais, symbolise la paix et la prospérité. Cependant, Les bases de l'UX/UI numérique (10H) 46 dans d'autres cultures, ce même symbole peut être interprété différemment, notamment en raison de son utilisation historique. Il est donc essentiel pour les designers d'interface utilisateur de considérer ces associations culturelles lorsqu'ils s'adressent à un public international, afin de prévenir tout malentendu ou mauvaise interprétation. Vers une esthétique équilibrée Un agencement harmonieux des formes dans une interface crée une impression d'équilibre et de cohérence visuelle. En tant que designers, vous pouvez observer que la disposition réfléchie des différentes formes aide à organiser le contenu de manière logique et à orienter le regard de l'utilisateur à travers l'interface. Par ailleurs, une utilisation appropriée de l'espace négatif est cruciale pour éviter
