Embed Size (px)
Citation preview
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
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.
