RAPPORT DE PROJET DE FIN D’ETUDES Filière : Génie Informatique Thème Développement d’une Banque Digitale AXE : User Experience Réalisé par : Encadré par : LAKHMAISS MOSSAAB Mme. SQUALLI HOUSSAINI Zineb BOULAICH ILIASS MAGHNINE ACHRAF M.BELHAJ Tarik Année universitaire : 2021/2022 1 Table des matières Chapitre 1 : Présentation générale .......................................................................1 1. Banque Digitale ..................................................................................................................... 2 2. Présentation du projet ........................................................................................................... 3 3. Objectif du projet .................................................................................................................. 3 4. User Experience .................................................................................................................... 3 4.1 Définition ...................................................................................................................... 3 4.2 Histoire d’UX ............................................................................................................... 3 4.3 Missions ........................................................................................................................ 3 4.4 Facteurs qui influencent un UX .................................................................................... 3 4.5 Plans qu’un UX doit concevoir ..................................................................................... 3 5. Etude préliminaire ................................................................................................................ 5 5.1. Les systèmes d’exploitation mobiles ............................................................................ 5 5.2. Les types d’applications mobiles .................................................................................. 6 7. Conclusion ............................................................................................................................. 3 Chapitre 2 : Etude théorique et Conception ......................................................4 1. Problématique ....................................................................................................................... 6 2. Etude de l’existant ................................................................................................................ 6 2.1. Solutions disponibles au Maroc .................................................................................... 6 2.2. Solutions disponibles dans le monde ........................................................................... 6 2.3. Critique de l’existant .................................................................................................... 6 3. Analyse des besoins .............................................................................................................. 0 3.1. Les besoins fonctionnels ............................................................................................... 6 3.2. Les besoins non fonctionnels .................................................................................................... 6 4. Solution envisagée ................................................................................................................. 6 5. Diagramme UML ................................................................................................................. 6 5.1. Définition ...................................................................................................................... 6 5.2. Digramme de cas d’utilisation ...................................................................................... 6 6. Conclusion ............................................................................................................................. 6 Chapitre 3 : Réalisation ........................................................................................4 2 Introduction De nos jours les banques représentent l’un des domaines qui connaissent un nombre énorme de client et qui souffrent pour le satisfaire. Alors disposer d’un compte bancaire est nécessaire pour sécuriser son argent, percevoir un salaire, faire des achats, payer son loyer ou ses factures... En ouvrant un compte bancaire, vous pouvez disposer d’une multitude de solutions pour gérer votre argent au quotidien en toute sécurité. Cependant les banques doivent alors proposer leurs services d’une façon plus rapide, plus sécurisé et plus moderne, mais aussi à distance afin de pouvoir éviter la congestion dans les agences. Vue à l’évolution du marché des produits technologiques, on a eu des changements sur la façon et la rapidité d’accès aux informations, et comme plusieurs secteurs qui sont adaptés à ce changement, les banques sont les autres aussi qui ont suivi cette modernité. Avec l’apparition des appareils mobiles, comme les smartphones et les tablettes qui ont connu une révolution technologique, il est devenu facile pour une banque de gérer ce conflit par proposer une application mobile capable de procurer des services indispensables rapidement et à tout moment. Notre projet consiste à développer une application mobile d’une banque digitale qui propose de nombreuses fonctionnalités à l’utilisateur pour consulter son compte bancaire et effectuer des différentes activités d’après son mobile. Notre groupe est dédié pour la partie de l’expérience utilisateur « User Experience », chargé de préparer les interfaces de l’application que l’utilisateur va voir et utiliser, en respectant tous les mesures et les principes du UX. Ce rapport décrit les étapes de développement de notre projet. Il contient quatre chapitres principaux. Le premier chapitre « Présentation générale » présente le contexte du travail. Le deuxième chapitre « Etude théorique et choix techniques » s’agit d’un benchmarking qui consiste à étudier et analyser quelque solution déjà présente dans le marché, voir ce qu’ils apportent et déterminer ce qui manque pour proposer la meilleure solution. Ensuite le troisième chapitre intitulé « Analyse des besoins et spécification ». Le dernier chapitre « Réalisation » présente les démarches techniques pour la réalisation de l’application ainsi que l’environnement et les outils utilisés, et une présentation des interfaces de l’application. Finalement on clôture avec une conclusion générale. 3 Chapitre 1 : Présentation générale 1. Introduction Ce chapitre présente l’axe « User Experience » et ses missions, les facteurs qui l’influence et les plans qui devra concevoir, ainsi que le cadre du projet. 2. Banque Digitale La banque digitale correspond à l’évolution de la relation d’une banque avec ses clients sous l’effet du digital. Il recouvre quatre aspects principaux : la mobilité l’instantanéité la distanciation l’interactivité En effet grâce à la mobilité tous les services bancaires deviennent accessibles sans aucune contrainte liée au temps ou à l’espace, ainsi vous pouvez effectuer des opérations instantanées, alors il est possible d’obtenir des réponses immédiates et multiples. Avec une banque digitale, il est possible de réaliser des opérations bancaires courantes à distance (virement, encaissement de chèques…). Au-delà, c’est l’intégralité du parcours client qui est digitalisé, de la première expression de son besoin à la réalisation d’une opération ou la souscription d’un nouveau service ou contrat (crédit en ligne, épargne…). Enfin, la banque digitale ne se limite pas à la présence numérique de la banque elle-même. Cette tendance inclut également les réseaux sociaux, qui jouent un rôle de plus en plus prégnant dans le partage d’informations sur l’offre entre clients. 3. Présentation du projet Une banque digitale offre de nombreux services à ses clients d’une manière digitale en suivant des technologies avancées. Cependant pour conserver cette digitalisation nous devons préparer pour les clients une solution digitale pour son confort, afin qu’il puisse faire ses besoins à distance, en toute sécurité, à tout moment, et bien sur toute autres aspects qu’assure une banque digitale. C’est pourquoi il est nécessaire pour une banque digitale d’offrir à ses clients une application mobile puissante permettant de réaliser tous ces opérations à distance. 4. Objectif du projet Comme nous présente la figure ci-dessous, l’idée de ce projet est de réaliser une application mobile qui satisfait les besoins du client (gagner du temps, être confortable…). Par conséquent, l’objectif consiste à développer une application mobile conviviale et moderne qui propose plusieurs fonctionnalités bancaires. 4 5. User Experience Avant de continuer aux étapes suivantes, il faut tout d’abord savoir le terme « UX » et quel rôle joue dans la réalisation d’un projet. 5.1. Définition La notion d’expérience utilisateur marque une évolution disciplinaire, méthodologique et conceptuelle dans la façon de concevoir la relation de l'utilisateur aux produits et aux systèmes techniques, d'une part, et de considérer leur qualité « ergonomique », d'autre part. Cette évolution passe aujourd'hui par la prise en compte des caractéristiques non instrumentales (non liées à l'efficacité, la sécurité ou la fiabilité) des produits et des systèmes techniques, soit l'apparence, l'esthétique, le plaisir, l'émotion, etc. 5.2. Histoire du terme User Experience Donald Norman, professeur émérite en sciences, invente le terme dans les années 1990, dans l'ouvrage « The Design of Everyday Things ». Il y développe l'idée d'une « conception centrée utilisateur ». L'idée consiste à considérer l'ensemble des caractéristiques et des besoins des utilisateurs lors du développement des produits, et à faire participer ceux-ci activement au processus de leur conception. 5.3. Missions La qualité de l’application est l'objectif principal. Les méthodologies UX : recherche utilisateur, personae, parcours utilisateurs, mapping d’expérience, tests d’usabilité, etc. L’UX Designer est responsable de la qualité et de l’ergonomie d’un site web, que ce soit sur desktop ou sur mobile, il a comme objectif de diminuer au maximum les interrogations que peut avoir un utilisateur lors de sa navigation sur l’application. Il doit comprendre les besoins utilisateurs et les traduire en solutions, il doit aussi faire en sorte que l’ergonomie soit adaptée à la fois aux cibles définies mais aussi au message de la marque, aux messages marketing et aux éléments de réassurances. 5 5.4. Les facteurs qui influencent l’expérience S’il est vrai que l’UX en tant que discipline a commencé avec l’utilisabilité, l’UX a grandi pour accueillir beaucoup plus que l’utilisabilité, et prêter attention à toutes les facettes de l’UX afin de livrer des produits réussis sur le marché est vital. Selon Peter Morville, pionnier dans le domaine de l’UX, qui a écrit plusieurs best-sellers et conseille de nombreuses sociétés Fortune 500 sur l’UX, il y a sept facteurs qui décrivent l’expérience utilisateur. Morville a classé les sept facteurs dans le « User Experience Honeycomb », qui est devenu un outil célèbre pour comprendre le design UX. a. Utile : Si un produit n’est pas utile à quelqu’un, pourquoi voudriez-vous le mettre sur le marché ? S’il n’a pas de but, il est peu probable qu’il puisse rivaliser avec un marché plein de produits à propos et utiles. Il est à noter que « utile » est du point de vue de l’observateur, et les choses peuvent être jugées « utiles » si elles offrent des avantages non pratiques tels que l’amusement ou l’attrait esthétique. Ainsi, un jeu d’ordinateur ou une sculpture peuvent être considérés comme utile même si aucun d’entre eux ne permet à un utilisateur d’atteindre un but que d’autres trouvent significatif. Dans le premier cas, un adolescent peut utiliser le jeu pour évacuer l’angoisse après un examen difficile au collège ; dans le dernier cas, un visiteur de galerie d’art peut « utiliser » la sculpture pour s’éduquer sur la technique ou la tradition de l’artiste, tout en acquérant un plaisir spirituel à la fois. b. Utilisable : L’utilisabilité vise à permettre aux utilisateurs d’atteindre leur objectif final avec un produit de manière efficace et efficiente. Un jeu d’ordinateur qui nécessite trois ensembles de pads de contrôle est peu susceptible d’être utilisable car les gens, pour le moment au moins, ont seulement tendance à avoir deux mains. Les produits peuvent réussir s’ils ne sont pas utilisables, mais ils sont moins susceptibles de le faire. Une utilisabilité médiocre est souvent associée à la toute première génération d’un produit — pensons à la première génération de lecteurs MP3, qui ont depuis perdu leur part de marché au profit de l’iPod plus utilisable. L’iPod n’était pas le premier lecteur MP3, mais il était le premier — dans un sens UX, au moins — lecteur MP3 vraiment utilisable. c. Trouvable : Trouvable fait référence à l’idée que le produit doit être facile à trouver, et dans le cas des produits digitaux et d’information, le contenu de ces produits doit également être facile à 6 trouver. La raison est simple : si vous ne trouvez pas le contenu que vous voulez dans un site web, vous allez arrêter de le parcourir. Si vous récupériez un journal et que toutes les histoires qui s’y trouvaient étaient classées au hasard, au lieu d’être organisées en sections telles que Sport, Divertissement, Affaires, etc., vous trouveriez probablement que lire le journal est une expérience très frustrante. Il en va de même pour la chasse aux LP dans un magasin de musique vintage — alors que certains trouveront peut-être une partie de l’amusement et du rituel dans des racks d’assortiments d’artistes assortis au hasard, beaucoup d’entre nous rechercheraient par ordre alphabétique, achèteraient ce qu’ils veulent, sortiraient et continueraient leur journée. Le temps a tendance à être précieux pour la plupart des individus, en grande partie grâce à un petit facteur appelé « durée de vie limitée ». La prouvabilité est donc vitale pour l’expérience utilisateur de nombreux produits. d. Crédible : Les utilisateurs du vingt-et-unième siècle ne vous donneront pas une seconde chance de les tromper — il existe de nombreuses alternatives dans presque tous les domaines pour qu’ils puissent choisir un fournisseur de produits crédible. Ils peuvent et vont partir en quelques secondes et clics, sauf si vous leur donnez des raisons de rester. La crédibilité est liée à la capacité de l’utilisateur à faire confiance au produit que vous lui avez fourni — pas seulement qu’il fasse le travail qu’il est censé faire, mais aussi qu’il dure un temps raisonnable et que les informations fournies avec soient précises et adaptées à l’usage. Il est presque impossible d’offrir une expérience utilisateur si les utilisateurs pensent que le créateur du produit est un clown menteur avec de mauvaises intentions — ils iront faire leurs affaires ailleurs, très rapidement et avec des souvenirs très clairs de l’impression que le créateur a laissée en eux. Incidemment, ils peuvent bien le dire aux autres, soit en passant, soit plus intentionnellement, sous la forme de commentaires, de manière à avertir les futurs clients, ou les « victimes » comme ils les verraient. e. Désirable : Skoda et Porsche fabriquent tous deux des voitures. Les deux marques sont, dans une certaine mesure, utiles, utilisables, trouvables, accessibles, crédibles et précieuses – mais Porsche est beaucoup plus désirable que Skoda. Cela ne veut pas dire que Skoda est indésirable ; ils ont vendu beaucoup de voitures. Cependant, étant donné le choix d’une nouvelle Porsche ou Skoda gratuitement, la plupart des gens optent pour la Porsche. La désirabilité est véhiculée dans le design par le branding, l’image, l’identité, l’esthétique et le design émotionnel. Plus un produit est désirable, plus il est probable que l’utilisateur qui le possède s’en vante et crée du désir chez les autres utilisateurs. Oui, nous parlons d’envie ici ; bien que nous puissions saluer l’esprit indomptable de Skoda — en particulier pour avoir fait des pas très innovants et avoir utilisé au mieux les ressources derrière le Rideau de Fer — nous aurons tendance à désirer l’autre voiture ici, celle qui crie « Regardez-moi ! » la puissance pure et l’opulence sur quatre roues. 7 f. Accessible : Malheureusement, l’accessibilité se perd souvent dans le mélange lors de la création d’expériences utilisateur. L’accessibilité consiste à fournir une expérience à laquelle peuvent accéder les utilisateurs ayant une gamme complète de capacités — cela inclut ceux qui sont handicapés à certains égards, tels que l’ouïe, la vision, le mouvement ou les difficultés d’apprentissage. Le design pour l’accessibilité est souvent perçu par les entreprises comme un gaspillage d’argent — la raison étant l’idée erronée persistante selon laquelle les personnes handicapées constituent une petite partie de la population. En fait, selon des données de recensement aux États-Unis, au moins 19% des personnes avaient un handicap en 2010, et il est probable que ce nombre soit plus élevé dans les pays moins développés. C’est une personne sur cinq dans l’audience de votre produit qui pourrait ne pas être en mesure de l’utiliser s’il n’est pas accessible — ou 20% de votre marché total ! Il vaut également la peine de se rappeler que lorsque vous créez pour l’accessibilité, vous constaterez souvent que vous créez des produits qui sont plus faciles à utiliser pour tous, pas seulement pour les personnes handicapées. Ne négligez pas l’accessibilité dans l’expérience utilisateur ; Il ne s’agit pas seulement de faire preuve de courtoisie et de décence, mais aussi de faire preuve de bon sens. Enfin, le design accessible est désormais une obligation légale dans de nombreuses juridictions, telles que l’UE. L’impossibilité de fournir l’accessibilité dans les créations peut entraîner des amendes. Malheureusement, cette obligation n’est pas appliquée aussi souvent qu’elle devrait l’être ; tout de même, la route du progrès est devant nous. g. Précieux : Enfin, le produit doit fournir de la valeur. Il doit apporter de la valeur à l’entreprise qui le crée et à l’utilisateur qui l’achète ou l’utilise. Sans valeur, il est probable que tout succès initial d’un produit finira par se corroder à mesure que les réalités de l’économie naturelle commenceront à le miner. En tant que designers, nous devons garder à l’esprit que la valeur est l’une des principales influences sur les décisions d’achat. Un produit de 100 $ qui résout un problème de 10 000 $ est celui qui est susceptible de réussir ; un produit de 10 000 $ qui résout un problème de 100 $ est beaucoup moins susceptible de le faire. 5.5. Les Plans Indispensables qu’un UX devra concevoir : Pour concevoir une bonne interface il faut adopter 5 plans qui sont indispensable pour un UX selon Jesse James Garret dans son livre « the elements of user experience » 8 a. La vision stratégique : Servant à définir les besoins de l’utilisateur et donc les objectifs Au sommet du modèle à cinq plans, nous portons notre attention sur les aspects du produit que nos utilisateurs remarqueront en premier : le design sensoriel. Ici, le contenu, la fonctionnalité et l'esthétique se rejoignent pour produire un design fini qui plaît aux sens tout en remplissant tous les objectifs des quatre autres plans. Les besoins des utilisateurs sont les objectifs de l’application qui proviennent de l'extérieur, en particulier des personnes qui utiliseront notre application. Nous devons comprendre ce que le public attend de nous et comment cela s'inscrit dans ses autres objectifs. b. Les fonctionnalités de l’application : Désigne le contenu de l’interface découlant directement des objectifs. c. La structure : C’est-à-dire l’enchaînement des pages ou des écrans, selon le Design d’interaction et l’architecture d’information. Une fois les exigences définies et hiérarchisées, nous avons une image claire de ce qui sera inclus dans le produit final. Les exigences, cependant, ne décrivent pas comment les pièces s'emboîtent pour former un tout cohérent. Il s'agit du niveau supérieur de la portée : développer une structure conceptuelle pour le site. d. Le squelette : Servant à concevoir une interface claire et parfaitement lisible .Sur le plan du squelette, nous affinons davantage cette structure, en identifiant les aspects spécifiques de l'interface, de la navigation et de la conception de l'information qui rendront concrète la structure immatérielle e. L’aspect visuel : Rendant l’interface plus attractive et désirable pour les utilisateurs. 9 10 Chapitre 2 : Etude théorique et Conception L’étude théorique consiste à faire une étude de l’existant avec des solutions proposées. Ce chapitre présente une analyse des besoins et une conception de l’application à la fin du chapitre. 1. Problématique Etant donné cette diversité des systèmes d’exploitation et de type d’application mobile, nous avons dû choisir entre développer une application spécifique à une plateforme ou bien une application multiplateforme. 2. Etude de l’existant Dans cette section nous allons étudier les différentes applications bancaires du marché pour bien prendre nos décisions techniques. 2.1. Solutions disponibles au Maroc L’bankalik L'bankalik, est une nouvelle génération de services bancaires garantis par Attijariwafa Bank, présente une application mobile à utiliser avec une interface accueillante et qui offre des services comme : • • • Consulter le solde et les mouvements des comptes en temps réel avec un historique. Effectuer des recherches multicritères sur les écritures du compte. Commander un chéquier La figure ci-dessous montre l’interface principale de l’application : 11 2.2. Solutions disponibles dans le monde Nickel La banque digitale Nickel offre une application mobile très conviviale avec une interface moderne. Ci-dessous la figure montre quelques interfaces de l’application. 2.3. Critique de l’existant Au Maroc, il n’existe pas un grand nombre des banques digitales, mais les autres banques offrent aussi ses applications mobiles, sauf que ces derniers ne réussissent pas à proposer à la fois un grand nombre de fonctionnalités et une interface moderne et conviviale. 3. Analyse des besoins Notre travail sert à offrir à un client de la banque accès en temps réel aux données et services bancaires depuis son téléphone. Le client est l’acteur principal de notre application, il profite de toutes les fonctions offertes par l’application. 3.2. Les besoins fonctionnels Dans cette partie on va définir les actions qu’un acteur peut faire à l’aide de l’application mise à sa disposition. Toute l’application mobile est disponible au client pour lui permettre après l’authentification par son identifiant et son mot de passe d’avoir accès aux différents services offerts : Consulter ses informations personnelles Consulter toutes les transactions effectuées sur ces comptes Effectuer des virements Payer des factures Consulter son histoire des opérations 12 Toutefois, un simple utilisateur sans authentification peut aussi bénéficier de certains services : Contacter la banque S’adresser vers notre site Web 3.3. Les besoins non fonctionnels Après avoir capturé les besoins fonctionnels, On peut passer maintenant aux contraintes d’implémentation à respecter pour garantir le bon fonctionnement de l’application : La sécurité : C’est un besoin très important à assurer lorsqu’on parle des banques, pour cela chaque opération qui semble avoir un risque va être traité par l’axe de sécurité. La performance : Etant donné le nombre d’utilisateur simultanés, l’application doit être en mesure de satisfaire tous les clients. On distingue pour ça 4 axes de travail : a. Rapidité : l’application doit être conçue pour avoir un temps de réponse minimum. b. Disponibilité : le réseau doit être disponible en permanence pour permettre à chaque utilisateur d’accéder aux services disponibles à n’importe quel moment. c. Fiabilité : l’application doit avoir une bonne qualité de contenu ainsi qu’il faut assurer le bon fonctionnement sans erreur. d. L’ergonomie : L’application doit être simple à maintenir et à comprendre. 4. Solution envisagée Pour une banque l’application proposée doit être ergonomique, rapide et riche de fonctionnalités. Suite à notre étude on a constaté que les applications natives offrent les meilleures performances. Ensuite il fallait choisir le système d’exploitation convenable, Pour notre cas, on va développer une application mobile pour une maquette d’iPhone 6 plus d’un système d’exploitation iOS. 5. Diagrammes UML 5.1. Définition Le Langage de Modélisation Unifié, ou Unified Modeling Language (UML), est un langage de modélisation graphique à base de pictogrammes conçu comme une méthode normalisée de visualisation dans les domaines du développement logiciel et en conception orientée objet. UML est destiné à faciliter la conception des documents nécessaires au développement d'un logiciel orienté objet, comme standard de modélisation de l'architecture logicielle. Les différents éléments représentables sont : Activité d'un objet/logiciel Acteurs Processus Schéma de base de données 13 Composants logiciels Réutilisation de composants. 5.2. Diagramme de cas d’utilisation Le diagramme de cas d’utilisations représente les actions réalisées par les acteurs du système pour avoir un résultat qui répond au besoin des acteurs. Nous allons présenter ici le diagramme de cas d’utilisation de l’application. La figure ci-dessus est un diagramme de cas d’utilisation qui représente les actions qui peuvent être réaliser par le client sur l’application. 14 Conclusion Ce chapitre présente des études théoriques de l’existant sur les systèmes mobiles, et par la suite les différentes solutions disponibles du marché. Ensuite on a une analyse des besoins fonctionnels et non-fonctionnels, suivi d’une solution. Enfin on a une conception de l’application avec le diagramme de cas d’utilisation. 15 Chapitre 4 : Réalisation 1. Introduction : Dans ce chapitre nous allons présenter les différents environnements logiciels puis nous allons aborder les différentes étapes du développement. 2. Environnement logiciel : Nous avons travaillé dans ce projet par le logiciel « LiveCode » version 9.6.3 qui est un environnement de développement multiplateforme conçu pour créer des applications qui fonctionnent sur iOS, Microsoft Windows, Linux, MacOs, Android et les navigateurs. 3. Interface et utilisation de l’application : Dans cette section, nous exposerons les différentes interfaces de nos applications ainsi que leurs descriptions. 3.1. Lancement de l’application : Lors de l’exécution de l’application, la première interface est mise à la disposition du client pour qu’il puisse s’authentifier pour accéder à son compte en ligne. Qui contient deux champs pour l’identifiant et le mot de passe et un bouton de connexion comme indique la figure cidessous, avec une option de choix s’il voulait mémoriser son identifiant pour la prochaine authentification et une option s’il a oublié son mot de passe. Ainsi que deux boutons en bas qui propose les services disponibles sans être authentifié. 16 3.2. Accueil : Après qu’un utilisateur soit authentifié, l’interface Accueil s’affiche directement sur son écran qui présente les informations générales concernant le client. Est divisée sur 3 rubriques comme indiqué sur la figure ci-dessous : La première contenant des informations d’identité : Nom, Prénom, e-mail, numéro de téléphone et une photo. La deuxième affiche les comptes du client Ensuit la troisième dédiée pour afficher les offres offertes par la banque. 17 En bas de cette interface, il y en une barre de navigation entre les différentes interfaces de l’application. 3.2.1. Compte chèque particulier : Quand le client va cliquer sur la deuxième rubrique « Mes comptes » va accéder directement à une autre interface qui présente ses différents comptes. Dans la figure ci-dessus l’interface Compte chèque Particulier qui présente le solde du client et les différents retraits qu’il a effectué dans tel date. 18 3.2.2. Ma situation : Comme l’illustre la figure suivante le client peut consulter sa situation actuelle dont il peut savoir son compte actuel et ses cartes. 3.2.3. Cartes : 19
