L’architecture de votre solution est maintenant définie !
Je vous propose à présent de nous concentrer sur l’application de suivi des flux. Pour rappel, cette application sera mise à disposition de l’équipe comptable pour entrer les devis et régler les factures. L’interface de l’application est donc un élément crucial pour la réussite du projet. On parle d’interface Homme-Machine, IHM.
Mettons-nous au travail !
La charte graphique et l’UX design
Dans un projet SI, il est fort probable que la charte graphique soit déjà définie et imposée par votre client. Votre rôle, en tant que chef de projet SI, est de vous assurer que ces éléments sont intégrés dans la solution que vous allez livrer.
Si ce n’est pas le cas, vous devez intégrer la charge induite par cette création à votre projet (planning et budget) et vous assurer de la disponibilité des ressources.
Quoi qu’il en soit, votre création doit intégrer a minima les éléments suivants :
Le logo de l’entreprise
Éventuellement, le logo de l’application que vous allez créer
Les polices de caractères
Les niveaux de titres
Les éventuels pictogrammes
Les couleurs
Si vous développez une application web, soyez vigilant également avec le header, le footer et les principes de navigation, car ces éléments devront être cohérents sur toutes les pages de votre application.
Il se trouve que dans notre cas, le client “Les Artisans Réunis” est en train de retravailler sa marque ! Ils vont garder leur nom, mais changer de logo et leur nouvelle charte graphique n’est pas encore bien définie. Vous pouvez donc laisser libre cours à votre créativité pour cette partie.
La hiérarchie des menus et l’enchaînement des écrans
Un schéma valant mieux qu’un long discours, l’objectif de cette étape consiste à représenter simplement le contenu de votre future application.
N’importe quel logiciel fera l’affaire pour votre schéma. Personnellement, je préfère Visio, mais vous pouvez également utiliser un diaporama (comme PowerPoint) ou Lucidchart.
Voici ma proposition de représentation graphique de notre application de suivi des flux basée sur les spécifications de notre cahier des charges.
Partons de la page d’accueil, représentée en haut à gauche du schéma. On voit :
La nécessité de s’authentifier sur l’application (l’accueil donne sur une page de “login” qui renvoie sur une page d’erreur en cas d’erreur de saisie)
Les menus et sous-menus
Liste des flux
Administration
Utilisateurs
Rôles
Les principales pages du site
La liste des flux
La liste des devis d’un flux
La liste des factures générées
La liste des utilisateurs
La liste des rôles
Les principaux traitements
Relancer une extraction
Relancer une intégration
Créer, modifier, supprimer un utilisateur
Créer, modifier, supprimer un rôle
Les wireframes (écrans et états de sortie)
Un wireframe est un terme de design. C’est une maquette simplifiée d’une interface utilisateur ou d’une sortie imprimée pour montrer les fonctionnalités sans entrer dans le détail des aspects visuels. Un wireframe permet simplement de montrer l’emplacement de chaque élément sur notre maquette.
Voici deux propositions concrètes pour notre projet. Je les ai réalisées avec MockFlow, mais il existe de nombreux outils sur le net ; choisissez celui qui vous convient le mieux. Cliquez ici pour afficher en plein écran la maquette de l'écran "Liste des flux" et la maquette d'une facture.
Je vous laisse réaliser les autres wireframes de cette application :
la liste des devis d’un flux ;
la liste des factures générées ;
la liste des utilisateurs ;
la liste des rôles.
Et bien sûr, les fiches “Utilisateurs” et “Rôles” qui, même si elles n’apparaissent pas dans notre schéma de la hiérarchie de notre application, seront bien évidemment nécessaires dans le cas de la création ou de la modification des utilisateurs et rôles.
En résumé
Nous nous sommes intéressés à des aspects de design dans ce chapitre. Ne négligez pas ces aspects qui seront déterminants pour que les utilisateurs adoptent votre solution !
Vous avez :
réfléchi à la charte graphique de l’application de suivi des flux ;
représenté l’enchaînement des menus ;
et proposé des maquettes (wireframes) pour les pages de l’application.
Passons à la suite : la conception de votre base de données.
