Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

UX/UI DESIGN Ecrit par CISSE Cédric Enseignant Chercheur à L’ESATIC 1 2 Plan du

UX/UI DESIGN Ecrit par CISSE Cédric Enseignant Chercheur à L’ESATIC 1 2 Plan du cours Objectifs Pédagogique...........................................................................................6 Introduction...........................................................................................................7 Chapitre I : Différence entre UX et UI..................................................................9 I. UI design................................................................................................9 II. UX design..............................................................................................9 III. Les enjeux du UX design.................................................................11 Conclusion partielle.........................................................................................13 Chapitre II : UX Design......................................................................................14 I. Le métier de UX Designer......................................................................14 1. Missions du UX Designer....................................................................14 2. Qualités requises pour être un bon UX Designer................................15 II. Les fondamentaux du UX Design...........................................................15 1. L’utilisateur au centre du design.........................................................15 2. La notion d’usabilité............................................................................16 3. Le taux de rétention.............................................................................18 4. Le Hook Canvas..................................................................................18 5. Concevoir un produit simple...............................................................22 6. Création pour l’utilisateur mobile........................................................23 III. La démarche UX Design.........................................................................25 1. Le comportement de l’utilisateur.........................................................26 2. Méthodes utilisées par les agences......................................................31 3 Chapitre III : UI Design.......................................................................................39 I. Le métier de UI Designer........................................................................39 1- Missions...............................................................................................39 2- Qualités d’un UI Designer...................................................................39 II. Ergonomie/ Intuitivité / Navigabilité......................................................40 III. Codes graphiques & significations.........................................................40 IV. Codes chromatiques................................................................................45 V. Typographies..........................................................................................51 VI. Mises en pages et leurs significations.....................................................53 VII. Quelques outils de UI..........................................................................55 Chapitre IV : Pratique du Design Thinking.........................................................56 I. Faire preuve d’empathie.........................................................................57 1- Pourquoi faire preuve d’empathie ?.....................................................57 2- Comment développer l’empathie ?......................................................58 II. Définir le besoin......................................................................................59 1- Pourquoi définir le(s) besoin(s)...........................................................60 2- Comment analyser les besoins ?..........................................................61 III. Rechercher des idées...............................................................................61 IV. Prototyper des solutions..........................................................................62 1- Pourquoi prototyper ?..........................................................................63 2- Comment prototyper ?.........................................................................64 V. Tester les solutions..................................................................................65 1- Pourquoi tester ?..................................................................................65 2- Les méthodes de tests..........................................................................66 4 Conclusion...........................................................................................................67 Liste des figures...................................................................................................68 Liste des tableaux................................................................................................69 5 Objectifs Pédagogiques Le couple UX/UI (User eXperience/ User Interface) design représente l’évolution de concepts tels que le webdesign ou encore l’interface Homme Machine. Ce cours a pour objectif d’inculquer à l’apprenant une méthodologie appropriée à la conception visuelle des applications tout en mettant l’utilisateur au centre de son approche. L’apprenant devra être en mesure de délivrer un produit visuel en se basant sur les motivations et les émotions des utilisateurs. Il s’agira en substance : - De faire la différence entre les métiers de UX Design et de UI Design - De maitriser les concepts et outils numériques/digitaux à la disposition du UX Designer et du UI Designer - De maitriser le concept de Design Thinking - De mettre en place une UI en adéquation avec les besoins déterminés par les UX Designers 6 Introduction En 2009, Jared Spool et son équipe ont été amenés à travailler pour un acteur majeur du e-commerce. L’objectif étant d’optimiser le tunnel d’achat, une étude a été réalisée en laboratoire dans le but d’y étudier les comportements des utilisateurs lors de la validation de leur panier. L’étude en question a mis en évidence des freins pour finaliser l’achat. Afin de pouvoir compléter le tunnel d’achat l'utilisateur devait obligatoirement être authentifié. Ce pré requis nécessitait la création d’un compte pour un nouvel utilisateur et de se souvenir de son mot de passe pour un utilisateur déjà inscrit. Certains ne se souvenant pas de leurs identifiants sont allés jusqu’à créer plusieurs comptes. L’étude de la base client démontre que 45% des clients possédaient plusieurs inscriptions. Les statistiques de renouvellement de mot de passe, ont également révélé une moyenne de 160 000 demandes par jour. Seulement 25% de ces demandes ont été transformées en achat. Les designers ont réglé le problème simplement en remplaçant le bouton “se connecter” par “continuer” et ont ajouté ce message : “Vous n'avez pas besoin de créer un compte pour effectuer des achats sur notre site. Cliquez simplement sur Continuer pour passer votre commande. Pour accélérer vos futurs achats, vous pouvez créer un compte lors de votre commande.” Résultat : le nombre d’achats a augmenté de 45%, les ventes supplémentaires ont atteint 15 millions de dollars le premier mois et 300 millions la première année. Bien plus qu’un effet de mode, l’UX design suscite de plus en plus d’intérêt pour les entreprises conscientes qu’elles doivent s’adapter aux besoins des utilisateurs et non l’inverse. Le marché étant de plus en plus concurrentiel et le consommateur de plus en plus volatile, il est de ce fait important d’étudier son 7 comportement, ses attentes, ses besoins afin que son parcours pour réaliser une action soit le plus fluide, intuitif et satisfaisant possible. Le piège qu’il faut absolument éviter est de confondre UX design et UI design. Le second n’étant qu’une étape du processus UX. Souvenez-vous qu’un beau papier cadeau ne sera pas suffisant si le contenu de votre paquet est vide. Partage d’expérience Partagez nous une mauvaise expérience que vous ou un de vos proches a vécu lors de l’utilisation difficile d’un logiciel ou d’un site web. 8 Chapitre I : Différence entre UX et UI De nombreuses personnes font l’erreur d’assimiler le design au beau. En réalité, design est un mot anglais qui signifie conception. De ce fait, faire du design ne correspond forcément à faire de l’artistique, de l’attrayant ou du beau, mais correspond plutôt au processus de conception d’un produit utile. Aujourd’hui très en vogue, la notion d’UX design est souvent mal comprise et maladroitement associée au design d’interface (UI design). Bien que ces deux notions soient indissociables, il faut cependant faire attention à ne pas les confondre. Afin de ne plus faire l'amalgame entre UX design et UI design voici un petit rappel. I. UI design Le terme “UI” pour “User Interface”, représente la couche visuelle, ou “interface”, qui permet à l’utilisateur d’interagir avec le produit. Le travail du designer d’interface, consistera donc, à organiser les éléments graphiques (choix des couleurs, emplacement des boutons, position des menus, taille des polices, …) de manière à proposer un produit efficace, simple d’utilisation et attrayant. En réalité cet exercice n’est que le résultat d’un travail plus approfondi réalisé par un UX designer. II. UX design L’acronyme “UX” vient de l’expression anglaise “User eXperience” (expérience utilisateur). L’expérience utilisateur se définit par le ressenti de l’utilisateur lors de son interaction avec un produit, un service ou un objet. De ce fait l’UX design consiste à prendre en compte l’expérience de l’utilisateur lors du processus de conception. Longtemps ignorés, les usagers interviennent 9 désormais très tôt comme parties prenantes afin que la solution finale corresponde mieux à leurs attentes et besoins. Vous n’arrivez toujours pas à distinguer UX design et UI design ? La photo ci-dessous devrait vous aider à mieux cerner la différence entre ces deux notions. Sur cette photo nous pouvons facilement comprendre l’intérêt de l’UX design et son impact sur le design d’interface. Si le comportement des usagers avaient été pris en compte en amont de la conception de cette allée, le dallage aurait été différent et certainement plus adapté à leurs comportements. 10 Au final, l’UX Design c’est donc très simple, c’est avant tout créer, améliorer et optimiser une expérience utilisateur dans une situation donnée : achat d’un produit en ligne, visite d’un site, parcours en magasin, utilisation d’un produit... Dans une démarche d’UX Design, l’objectif est de se démarquer grâce à une expérience agréable, simple et intuitive afin de créer, idéalement, un affect et un lien avec l’utilisateur qui lui donnera envie de revenir vers nous ( = vers notre produit, notre service). Aujourd’hui, l’UX revient en force car intervenant fortement dans notre société où la frontière entre digital et physique tend à disparaître et où les interactions avec les utilisateurs sont de plus en plus complexes, nombreuses et stratégiques afin de séduire un utilisateur (sur un site, une application, dans un magasin, via une newsletter, dans un magazine,...). III. Les enjeux du UX design Si les entreprises s’intéressent de plus en plus à l’UX design, c’est qu’il a un impact non négligeable sur le comportement des utilisateurs, leur perception du produit ou service et leur fidélité. Une étude menée par Youand*, démontre que 68% des utilisateurs quittent un site internet en raison d’une mauvaise expérience utilisateur et que 44% des acheteurs en ligne partageront avec des amis une mauvaise expérience. 11 Figure 1: Les enjeux du UX Design 12 Conclusion partielle Pour certains, ce cadre de conception appliquant sciences cognitives et comportementales au design produit s’apparente à de la manipulation. En ce qui concerne votre application, vous aurez une responsabilité envers les utilisateurs que vous allez accrocher. A vous de trouver un juste milieu enrte les intérêts de vos utilisateurs et ceux de votre entreprise. 13 Chapitre II : UX Design « On ne design pas l’expérience mais pour l’expérience » Marc Hassenzhal I. Le métier de UX Designer L'UX designer ou l'user expérience designer est un concepteur d'interfaces numériques dont la démarche est centrée sur l'utilisateur. D'une manière générale, son poste correspond à une évolution de celui de web designer. Il est donc chargé, en tant que designer, de répondre aux attentes des l'internautes en termes de navigation sur les plateformes web. 1. Missions du UX Designer L'UX designer a pour principale mission d'optimiser la plateforme en ligne d'une marque (site web, application desktop, application mobile ou logiciels...), en tenant compte essentiellement des besoins des utilisateurs. Il intervient alors pour définir quels sont les critères déterminants pour eux, afin de proposer une amélioration de l'interface. De fait, son travail consiste à effectuer une uploads/Industriel/cours-web-design.pdf