SlideShare une entreprise Scribd logo
1  sur  12
Télécharger pour lire hors ligne
1
1
UNIVERSITE DE TUNIS CARTHAGE
Institut des Hautes Etudes Commerciales de Carthage
Maquettes pour une application
Mobile bancaire
Réalisé par :
Khaled FAYALA
Année universitaire 2014/2015
2
2
Maquette
Après avoir déterminé les scénarios d’usages, nous nous sommes mis à faire la maquette
de notre application. L’objectif de ces interfaces est de vérifier si toutes les possibilités
décrites dans nos scénarios seraient bien réalisables dans notre application finale.
Page d’accueil
L’image ci-dessous représente la maquette de l’interface de la page d’accueil.
Fig. 1. La maquette de la page d'accueil
Nous avons décidé de faire une page d’accueil assez simple en termes de contenu
d’information (voir Fig. 1). Ainsi pour rendre l’interface facile à utiliser, le visiteur peut
3
3
accéder directement à quelques services tels que la consultation cours devises, localisation des
agences et DAB. L’abonné peut se connecter pour bénéficier d’autres fonctionnalités de
l’application.
Page de cours devises
L’image ci-dessous représente la maquette de l’interface de la page contenant le cours des
devises.
Fig.2. La maquette de la page de cours de devises
L’interface ci-dessus est organisé d’une manière lisible pour tous les utilisateurs :
 Pour chaque devise, nous avons décidé de mettre l’icône du pays qui utilise ce devise
ainsi que le nombre d’unité, les prix d’achat et de vente par apport au dinar tunisien.
4
4
Page de conversion de devises
Dans ce qui suit, nous présentons la maquette de la page de conversion de devises.
Fig.3. La maquette de la page de conversion de devises
À Partir de cette interface, l’utilisateur choisit la devise à convertir, le montant et ensuite il
valide l’opération de conversion. Donc c’est une interface très facile et simple à utiliser.
Page de localisation
Dans ce qui suit, nous présentons la maquette de la page de localisation.
5
5
Fig.4. La maquette de la page de localisation
Pour l’aspect ergonomique de la page de localisation, nous nous sommes inspirés de
l’application mobile Google Maps car nous pensions qu’elle était claire, ludique, pratique,
intuitive et surtout très utilisée. Nous avons essayés de garder et de mettre en œuvre ces
caractéristiques.
Cette page est composée de 2 parties :
 Partie haute : carte Google Maps permettant de géo localiser l’utilisateur, et les
agences ou DAB.
 Au dessous de la carte, l’utilisateur peut localiser soit les agences, soit les DAB.
6
6
Page d’annuaire des agences
L’image ci-dessous représente la maquette de l’interface de la page contenant l’annuaire
des agences.
Fig.5. La maquette de la page d’annuaire des agences
L’interface présentée par la figure ci-dessous est organisée d’une manière lisible pour
l’utilisateur. Les informations affichées sont :
 Adresse de l’agence
 Téléphone
 Mail
7
7
Page d’authentification
L’image ci-dessous représente la maquette de l’interface de la page d’authentification.
Fig.6. La maquette de la page d’authentification
À Partir de cette interface, l’utilisateur remplit que deux champs (identifiant et mot de
passe) et ensuit il clique sur le bouton connexion. Si l’authentification est validée, l’utilisateur
accède au menu suivant.
Page contenant le menu principal
L’image ci-dessous représente la maquette de l’interface de menu principal.
8
8
Fig.7. La maquette de la page de menu principal
L’interface de la page contenant le menu principal est bien structurée et simple pour
l’utilisation. Concernant les icônes, nous avons décidé d’utiliser des images ayant une
signification.
Page de commande chéquier
Dans ce qui suit, nous présentons la maquette de la page de commande chéquier.
9
9
Fig.8. La maquette de la page de commande chéquier
À Partir de cette interface, l’utilisateur choisit le nombre de chèque, la raison d’obtention
d’un chéquier et finalement valide l’opération de commande de chéquier.
Page de consultation de solde
Dans ce qui suit, nous présentons la maquette de la page de consultation de solde.
10
10
Fig.9. La maquette de la page de consultation de solde
À Partir de cette interface, l’utilisateur peut consulter le solde de son compte.
Page de modification de mot de passe
Dans ce qui suit, nous présentons la maquette de la page de modification de mot de passe.
11
11
Fig.10. La maquette de la page de modification de mot de passe
Page de désactivation du compte
Dans ce qui suit, nous présentons la maquette de la page de désactivation du compte.
12
12
Fig.11. La maquette de la page de désactivation du compte
L’interface ci-dessous est compréhensible par l’utilisateur. Au début, nous avons décidé
d’informer l’utilisateur qu’il est sur le point de supprimer son compte. Ensuite, nous avons
ajouté une question pour savoir si l’utilisateur veut encore désactiver le compte ou non.
Conclusion
Dans ce chapitre, nous avons présenté les maquettes des différentes interfaces de notre
application. Nous avons décidé de faire des interfaces lisibles, ergonomique et facile à utiliser
pour simplifier la tâche des utilisateurs.

Contenu connexe

Tendances

Rapport PFE : Réalisation d'une application web back-office de gestion pédago...
Rapport PFE : Réalisation d'une application web back-office de gestion pédago...Rapport PFE : Réalisation d'une application web back-office de gestion pédago...
Rapport PFE : Réalisation d'une application web back-office de gestion pédago...Anas Riahi
 
présentation de PFE
présentation de PFE présentation de PFE
présentation de PFE AmalSouheil1
 
Présentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobilePrésentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobileNader Somrani
 
Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...Ayoub Mkharbach
 
Ma présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebMa présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebHarrathi Mohamed
 
Conception et réalisation d'une plateforme social learning
Conception et réalisation d'une plateforme social learningConception et réalisation d'une plateforme social learning
Conception et réalisation d'une plateforme social learningRouâa Ben Hammouda
 
Soutenance Elhadj Bah | Diplôme d'ingénieur de conception en Informatique | E...
Soutenance Elhadj Bah | Diplôme d'ingénieur de conception en Informatique | E...Soutenance Elhadj Bah | Diplôme d'ingénieur de conception en Informatique | E...
Soutenance Elhadj Bah | Diplôme d'ingénieur de conception en Informatique | E...Elhadj Mamadou Aliou BAH
 
PFE::Conception et développement du Back Office d'une application mobile de g...
PFE::Conception et développement du Back Office d'une application mobile de g...PFE::Conception et développement du Back Office d'une application mobile de g...
PFE::Conception et développement du Back Office d'une application mobile de g...Rami Raddaoui
 
Présentation PFE: Système de gestion des réclamations et interventions clients
Présentation PFE: Système de gestion des réclamations et interventions clientsPrésentation PFE: Système de gestion des réclamations et interventions clients
Présentation PFE: Système de gestion des réclamations et interventions clientsMohamed Ayoub OUERTATANI
 
présentation de soutenance PFE
présentation de soutenance PFEprésentation de soutenance PFE
présentation de soutenance PFEKarim Labidi
 
Projet de fin d'etude sur le parc informatique
Projet  de fin d'etude sur le parc informatiqueProjet  de fin d'etude sur le parc informatique
Projet de fin d'etude sur le parc informatiqueHicham Ben
 
Projet Fin D'étude Application Mobile
Projet Fin D'étude Application MobileProjet Fin D'étude Application Mobile
Projet Fin D'étude Application MobileRim ENNOUR
 
Présentation finale
Présentation finalePrésentation finale
Présentation finaleheniBa
 
1601896849 rapport fluttercopie
1601896849 rapport fluttercopie1601896849 rapport fluttercopie
1601896849 rapport fluttercopieRamiJOUDI2
 
Rapport de stage de fin d'études ISI 2015
Rapport de stage de fin d'études ISI 2015Rapport de stage de fin d'études ISI 2015
Rapport de stage de fin d'études ISI 2015Anouar Kacem
 
Rapport gestion de stock.pdf
Rapport gestion de stock.pdfRapport gestion de stock.pdf
Rapport gestion de stock.pdfAchrafAntri2
 
Rapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobileRapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobileNader Somrani
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...MOHAMMED MOURADI
 

Tendances (20)

Rapport PFE : Réalisation d'une application web back-office de gestion pédago...
Rapport PFE : Réalisation d'une application web back-office de gestion pédago...Rapport PFE : Réalisation d'une application web back-office de gestion pédago...
Rapport PFE : Réalisation d'une application web back-office de gestion pédago...
 
présentation de PFE
présentation de PFE présentation de PFE
présentation de PFE
 
Présentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobilePrésentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobile
 
Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...
 
Ma présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebMa présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site Web
 
Présentation PFE
Présentation PFEPrésentation PFE
Présentation PFE
 
Conception et réalisation d'une plateforme social learning
Conception et réalisation d'une plateforme social learningConception et réalisation d'une plateforme social learning
Conception et réalisation d'une plateforme social learning
 
Soutenance Elhadj Bah | Diplôme d'ingénieur de conception en Informatique | E...
Soutenance Elhadj Bah | Diplôme d'ingénieur de conception en Informatique | E...Soutenance Elhadj Bah | Diplôme d'ingénieur de conception en Informatique | E...
Soutenance Elhadj Bah | Diplôme d'ingénieur de conception en Informatique | E...
 
E-learning
E-learningE-learning
E-learning
 
PFE::Conception et développement du Back Office d'une application mobile de g...
PFE::Conception et développement du Back Office d'une application mobile de g...PFE::Conception et développement du Back Office d'une application mobile de g...
PFE::Conception et développement du Back Office d'une application mobile de g...
 
Présentation PFE: Système de gestion des réclamations et interventions clients
Présentation PFE: Système de gestion des réclamations et interventions clientsPrésentation PFE: Système de gestion des réclamations et interventions clients
Présentation PFE: Système de gestion des réclamations et interventions clients
 
présentation de soutenance PFE
présentation de soutenance PFEprésentation de soutenance PFE
présentation de soutenance PFE
 
Projet de fin d'etude sur le parc informatique
Projet  de fin d'etude sur le parc informatiqueProjet  de fin d'etude sur le parc informatique
Projet de fin d'etude sur le parc informatique
 
Projet Fin D'étude Application Mobile
Projet Fin D'étude Application MobileProjet Fin D'étude Application Mobile
Projet Fin D'étude Application Mobile
 
Présentation finale
Présentation finalePrésentation finale
Présentation finale
 
1601896849 rapport fluttercopie
1601896849 rapport fluttercopie1601896849 rapport fluttercopie
1601896849 rapport fluttercopie
 
Rapport de stage de fin d'études ISI 2015
Rapport de stage de fin d'études ISI 2015Rapport de stage de fin d'études ISI 2015
Rapport de stage de fin d'études ISI 2015
 
Rapport gestion de stock.pdf
Rapport gestion de stock.pdfRapport gestion de stock.pdf
Rapport gestion de stock.pdf
 
Rapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobileRapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobile
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
 

Similaire à Maquettes pour une application mobile

Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Mohammed JAITI
 
rapport-du-stage,1.pdf
rapport-du-stage,1.pdfrapport-du-stage,1.pdf
rapport-du-stage,1.pdfSihamDL
 
Modern and Minimal Company Profile Presentation.pptx
Modern and Minimal Company Profile Presentation.pptxModern and Minimal Company Profile Presentation.pptx
Modern and Minimal Company Profile Presentation.pptxNourBenboubker
 
Rapport mini-projet Gestion Commerciale D’un Supermarché
Rapport mini-projet  Gestion Commerciale D’un SupermarchéRapport mini-projet  Gestion Commerciale D’un Supermarché
Rapport mini-projet Gestion Commerciale D’un SupermarchéMouad Lousimi
 
Rapport de stage.docx
Rapport de stage.docxRapport de stage.docx
Rapport de stage.docxdevandam
 
Livre blanc Développement mobile
Livre blanc Développement mobileLivre blanc Développement mobile
Livre blanc Développement mobileLudovic Tant
 
Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5YounessLaaouane
 
Societe generale-uiux
Societe generale-uiuxSociete generale-uiux
Societe generale-uiuxSalma EL OUR
 
Platform freelance ASP .NET / C#
Platform freelance ASP .NET / C# Platform freelance ASP .NET / C#
Platform freelance ASP .NET / C# Saâd Zerhouni
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsOlivier Dommange
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Idean France
 
Olivier Besson Portfolio
Olivier Besson PortfolioOlivier Besson Portfolio
Olivier Besson PortfolioOlivier Besson
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Mohammed JAITI
 
201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1Xavier Mouly
 

Similaire à Maquettes pour une application mobile (20)

Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
 
rapport-du-stage,1.pdf
rapport-du-stage,1.pdfrapport-du-stage,1.pdf
rapport-du-stage,1.pdf
 
Modern and Minimal Company Profile Presentation.pptx
Modern and Minimal Company Profile Presentation.pptxModern and Minimal Company Profile Presentation.pptx
Modern and Minimal Company Profile Presentation.pptx
 
Rapport mini-projet Gestion Commerciale D’un Supermarché
Rapport mini-projet  Gestion Commerciale D’un SupermarchéRapport mini-projet  Gestion Commerciale D’un Supermarché
Rapport mini-projet Gestion Commerciale D’un Supermarché
 
Rapport de stage.docx
Rapport de stage.docxRapport de stage.docx
Rapport de stage.docx
 
Livre blanc Développement mobile
Livre blanc Développement mobileLivre blanc Développement mobile
Livre blanc Développement mobile
 
Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5
 
prentationscript.docx
prentationscript.docxprentationscript.docx
prentationscript.docx
 
EXemple 2.pptx
EXemple 2.pptxEXemple 2.pptx
EXemple 2.pptx
 
Presentation de stage
Presentation de stagePresentation de stage
Presentation de stage
 
Societe generale-uiux
Societe generale-uiuxSociete generale-uiux
Societe generale-uiux
 
M commerce
M commerceM commerce
M commerce
 
Platform freelance ASP .NET / C#
Platform freelance ASP .NET / C# Platform freelance ASP .NET / C#
Platform freelance ASP .NET / C#
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016
 
PlanningPME Web Access en 10 étapes
PlanningPME Web Access en 10 étapesPlanningPME Web Access en 10 étapes
PlanningPME Web Access en 10 étapes
 
Olivier Besson Portfolio
Olivier Besson PortfolioOlivier Besson Portfolio
Olivier Besson Portfolio
 
AGL.pdf
AGL.pdfAGL.pdf
AGL.pdf
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
 
201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1
 

Plus de Khaled Fayala

Les critères d’une utilisabilité efficace d’API et comment améliorer cette ut...
Les critères d’une utilisabilité efficace d’API et comment améliorer cette ut...Les critères d’une utilisabilité efficace d’API et comment améliorer cette ut...
Les critères d’une utilisabilité efficace d’API et comment améliorer cette ut...Khaled Fayala
 
Étude comparative de la consommation d'énergie des applications mobiles ( Ca...
Étude comparative de la consommation d'énergie des applications mobiles  ( Ca...Étude comparative de la consommation d'énergie des applications mobiles  ( Ca...
Étude comparative de la consommation d'énergie des applications mobiles ( Ca...Khaled Fayala
 
Big data et le marketing
Big data et le marketingBig data et le marketing
Big data et le marketingKhaled Fayala
 
Développement d’une application mobile bancaire pour QNB Tunisie
Développement d’une application mobile bancaire pour QNB TunisieDéveloppement d’une application mobile bancaire pour QNB Tunisie
Développement d’une application mobile bancaire pour QNB TunisieKhaled Fayala
 
Le commerce electronique au Canada
Le commerce electronique au CanadaLe commerce electronique au Canada
Le commerce electronique au CanadaKhaled Fayala
 
Détection des droites par la transformée de Hough
Détection des droites par la transformée de HoughDétection des droites par la transformée de Hough
Détection des droites par la transformée de HoughKhaled Fayala
 
Plateforme d'enseignement à distance : efront
Plateforme d'enseignement à distance : efrontPlateforme d'enseignement à distance : efront
Plateforme d'enseignement à distance : efrontKhaled Fayala
 
Application mobile bancaire sous la plateforme Android
Application mobile bancaire sous la plateforme AndroidApplication mobile bancaire sous la plateforme Android
Application mobile bancaire sous la plateforme AndroidKhaled Fayala
 
BPMN : Business Process Modelling Notation
BPMN : Business Process Modelling NotationBPMN : Business Process Modelling Notation
BPMN : Business Process Modelling NotationKhaled Fayala
 
SCORM : Sharable Content Object Reference Model
SCORM: Sharable Content Object Reference ModelSCORM: Sharable Content Object Reference Model
SCORM : Sharable Content Object Reference ModelKhaled Fayala
 
Les bibliothèques de calcul scientifiques
Les bibliothèques de calcul scientifiquesLes bibliothèques de calcul scientifiques
Les bibliothèques de calcul scientifiquesKhaled Fayala
 
LE MANAGEMENT STRATEGIQUE
LE MANAGEMENT STRATEGIQUELE MANAGEMENT STRATEGIQUE
LE MANAGEMENT STRATEGIQUEKhaled Fayala
 
E-Front : Plateforme d’enseignement à distance
E-Front : Plateforme d’enseignement à distanceE-Front : Plateforme d’enseignement à distance
E-Front : Plateforme d’enseignement à distanceKhaled Fayala
 

Plus de Khaled Fayala (16)

Les critères d’une utilisabilité efficace d’API et comment améliorer cette ut...
Les critères d’une utilisabilité efficace d’API et comment améliorer cette ut...Les critères d’une utilisabilité efficace d’API et comment améliorer cette ut...
Les critères d’une utilisabilité efficace d’API et comment améliorer cette ut...
 
Étude comparative de la consommation d'énergie des applications mobiles ( Ca...
Étude comparative de la consommation d'énergie des applications mobiles  ( Ca...Étude comparative de la consommation d'énergie des applications mobiles  ( Ca...
Étude comparative de la consommation d'énergie des applications mobiles ( Ca...
 
Big data et le marketing
Big data et le marketingBig data et le marketing
Big data et le marketing
 
Développement d’une application mobile bancaire pour QNB Tunisie
Développement d’une application mobile bancaire pour QNB TunisieDéveloppement d’une application mobile bancaire pour QNB Tunisie
Développement d’une application mobile bancaire pour QNB Tunisie
 
Le commerce electronique au Canada
Le commerce electronique au CanadaLe commerce electronique au Canada
Le commerce electronique au Canada
 
Détection des droites par la transformée de Hough
Détection des droites par la transformée de HoughDétection des droites par la transformée de Hough
Détection des droites par la transformée de Hough
 
Traduction des sms
Traduction des smsTraduction des sms
Traduction des sms
 
Plateforme d'enseignement à distance : efront
Plateforme d'enseignement à distance : efrontPlateforme d'enseignement à distance : efront
Plateforme d'enseignement à distance : efront
 
Application mobile bancaire sous la plateforme Android
Application mobile bancaire sous la plateforme AndroidApplication mobile bancaire sous la plateforme Android
Application mobile bancaire sous la plateforme Android
 
BPMN : Business Process Modelling Notation
BPMN : Business Process Modelling NotationBPMN : Business Process Modelling Notation
BPMN : Business Process Modelling Notation
 
SCORM : Sharable Content Object Reference Model
SCORM: Sharable Content Object Reference ModelSCORM: Sharable Content Object Reference Model
SCORM : Sharable Content Object Reference Model
 
Les bibliothèques de calcul scientifiques
Les bibliothèques de calcul scientifiquesLes bibliothèques de calcul scientifiques
Les bibliothèques de calcul scientifiques
 
LE MANAGEMENT STRATEGIQUE
LE MANAGEMENT STRATEGIQUELE MANAGEMENT STRATEGIQUE
LE MANAGEMENT STRATEGIQUE
 
E-Front : Plateforme d’enseignement à distance
E-Front : Plateforme d’enseignement à distanceE-Front : Plateforme d’enseignement à distance
E-Front : Plateforme d’enseignement à distance
 
E business
E businessE business
E business
 
Traduction des SMS
Traduction des SMSTraduction des SMS
Traduction des SMS
 

Maquettes pour une application mobile

  • 1. 1 1 UNIVERSITE DE TUNIS CARTHAGE Institut des Hautes Etudes Commerciales de Carthage Maquettes pour une application Mobile bancaire Réalisé par : Khaled FAYALA Année universitaire 2014/2015
  • 2. 2 2 Maquette Après avoir déterminé les scénarios d’usages, nous nous sommes mis à faire la maquette de notre application. L’objectif de ces interfaces est de vérifier si toutes les possibilités décrites dans nos scénarios seraient bien réalisables dans notre application finale. Page d’accueil L’image ci-dessous représente la maquette de l’interface de la page d’accueil. Fig. 1. La maquette de la page d'accueil Nous avons décidé de faire une page d’accueil assez simple en termes de contenu d’information (voir Fig. 1). Ainsi pour rendre l’interface facile à utiliser, le visiteur peut
  • 3. 3 3 accéder directement à quelques services tels que la consultation cours devises, localisation des agences et DAB. L’abonné peut se connecter pour bénéficier d’autres fonctionnalités de l’application. Page de cours devises L’image ci-dessous représente la maquette de l’interface de la page contenant le cours des devises. Fig.2. La maquette de la page de cours de devises L’interface ci-dessus est organisé d’une manière lisible pour tous les utilisateurs :  Pour chaque devise, nous avons décidé de mettre l’icône du pays qui utilise ce devise ainsi que le nombre d’unité, les prix d’achat et de vente par apport au dinar tunisien.
  • 4. 4 4 Page de conversion de devises Dans ce qui suit, nous présentons la maquette de la page de conversion de devises. Fig.3. La maquette de la page de conversion de devises À Partir de cette interface, l’utilisateur choisit la devise à convertir, le montant et ensuite il valide l’opération de conversion. Donc c’est une interface très facile et simple à utiliser. Page de localisation Dans ce qui suit, nous présentons la maquette de la page de localisation.
  • 5. 5 5 Fig.4. La maquette de la page de localisation Pour l’aspect ergonomique de la page de localisation, nous nous sommes inspirés de l’application mobile Google Maps car nous pensions qu’elle était claire, ludique, pratique, intuitive et surtout très utilisée. Nous avons essayés de garder et de mettre en œuvre ces caractéristiques. Cette page est composée de 2 parties :  Partie haute : carte Google Maps permettant de géo localiser l’utilisateur, et les agences ou DAB.  Au dessous de la carte, l’utilisateur peut localiser soit les agences, soit les DAB.
  • 6. 6 6 Page d’annuaire des agences L’image ci-dessous représente la maquette de l’interface de la page contenant l’annuaire des agences. Fig.5. La maquette de la page d’annuaire des agences L’interface présentée par la figure ci-dessous est organisée d’une manière lisible pour l’utilisateur. Les informations affichées sont :  Adresse de l’agence  Téléphone  Mail
  • 7. 7 7 Page d’authentification L’image ci-dessous représente la maquette de l’interface de la page d’authentification. Fig.6. La maquette de la page d’authentification À Partir de cette interface, l’utilisateur remplit que deux champs (identifiant et mot de passe) et ensuit il clique sur le bouton connexion. Si l’authentification est validée, l’utilisateur accède au menu suivant. Page contenant le menu principal L’image ci-dessous représente la maquette de l’interface de menu principal.
  • 8. 8 8 Fig.7. La maquette de la page de menu principal L’interface de la page contenant le menu principal est bien structurée et simple pour l’utilisation. Concernant les icônes, nous avons décidé d’utiliser des images ayant une signification. Page de commande chéquier Dans ce qui suit, nous présentons la maquette de la page de commande chéquier.
  • 9. 9 9 Fig.8. La maquette de la page de commande chéquier À Partir de cette interface, l’utilisateur choisit le nombre de chèque, la raison d’obtention d’un chéquier et finalement valide l’opération de commande de chéquier. Page de consultation de solde Dans ce qui suit, nous présentons la maquette de la page de consultation de solde.
  • 10. 10 10 Fig.9. La maquette de la page de consultation de solde À Partir de cette interface, l’utilisateur peut consulter le solde de son compte. Page de modification de mot de passe Dans ce qui suit, nous présentons la maquette de la page de modification de mot de passe.
  • 11. 11 11 Fig.10. La maquette de la page de modification de mot de passe Page de désactivation du compte Dans ce qui suit, nous présentons la maquette de la page de désactivation du compte.
  • 12. 12 12 Fig.11. La maquette de la page de désactivation du compte L’interface ci-dessous est compréhensible par l’utilisateur. Au début, nous avons décidé d’informer l’utilisateur qu’il est sur le point de supprimer son compte. Ensuite, nous avons ajouté une question pour savoir si l’utilisateur veut encore désactiver le compte ou non. Conclusion Dans ce chapitre, nous avons présenté les maquettes des différentes interfaces de notre application. Nous avons décidé de faire des interfaces lisibles, ergonomique et facile à utiliser pour simplifier la tâche des utilisateurs.