• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 29/06/2020

Concevez votre IHM

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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.

Hiérarchie de l’application de suivi des flux
Hiérarchie de l’application de suivi des flux

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.

Maquette de l’écran “Liste des flux”
Maquette de l’écran “Liste des flux”
Maquette d’une facture
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.

Exemple de certificat de réussite
Exemple de certificat de réussite