Maquettes pour une application mobile

937 vues

Publié le

Ce rapport contenant des maquettes pour une application mobiles bancaires. Je vous laisse découvrir ça dans ce manuscrit.

Publié dans : Design
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
937
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Maquettes pour une application mobile

  1. 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 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 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 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 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 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 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 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 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 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 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 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.

×