Demo Windfarm AREVA – partie 1

Mission Areva - Première partie

L’agence de Montpellier de l’entreprise GFI Informatique m’a contacté pour réaliser la démo des capacités d’une IHM de dernière génération : GENESIS64, de l’éditeur américain ICONICS [1]-[2] .

Ayant adhéré aux conditions de confidentialité demandées par AREVA par le biais de l’entreprise GFI, je ne peux publier ici certains documents, y compris certains objets graphiques que j’ai pu réaliser …

Au moment de la mission, l’IHM était adaptée en partie par l’entreprise GFI Informatique, en version 32bits, aux besoin de l’entreprise AREVA de Lattes. Cependant, personne n’avait encore testé ses capacités en version 64bits, dont l’étendue des capacités en terme de graphisme et de représentation 2D et 3D intéressait grandement.

Repéré pour mes capacités d’auto-formation, mes compétences pluri-disciplinaires en Design 2D et 3D, ainsi qu’en design d’interaction via le développement as3 et le design flash, j’ai dû passer par plusieurs phases de réalisation …

Première phase : acquisition, scénarisation, évaluation

Planche contact des 24 pages du document de base pour la structure de la démo En collaboration avec le chef de projet de cette mission, j’ai joué le rôle de réalisateur, d’exécutant, de créatif, et de chef de projet technique dans le domaine Infographie.
Le travail a débuté à partir de documents Powerpoint et Word qui définissaient la structure de la démo, les différentes sections de celle-ci et les points qu’AREVA désirait mettre en avant.

Chaque étape a fait l’objet de contrôles réguliers et de présentations devant les chefs de services compétents tout au long de la mission.

J’ai disposé d’un peu plus d’une semaine pour réaliser mon auto-formation sur la suite logicielle Genesis64, à partir des documents d’aide, de l’aide en ligne et des exemples fournis avec la démo de la suite.
Le reste de cette auto-formation s’est poursuivi en parallèle avec la réalisation de la démo en elle-même tout au long des trois mois de la mission.

Cet apprentissage du logiciel a pu être grandement accéléré par une comparaison avec Flash et l’actionscript 3, ainsi que par mon expérience pratique du design web sur ces six dernières années.

Des croquis pour faire le tri

Croquis de proposition de structure pour la démo - Mes recherches sont souvent effectuées au stylo noir sur papier A4 Recherches en composition et navigation - et quelques idées pour des icônes Recherche de navigation pour une vue en pseudo 3D isométrique - Quelques autres idées d'icônes

Design d'interaction 3D de la page d'accueil - Recherches d'illustration de fond Fin de recherche de fond pour la page d'accueil - quelques recherches affinées pour des icônes Une idée d'illustration trop complexe pour un filigrane et que je n'ai moi-même pas retenu

C’est en recherchant les fonctionnalités que suggéraient les demandes contenues dans le scénario du client que j’ai pu gérer deux actions conjointes :
poursuivre l’auto-formation, tout en évaluant la faisabilité de certaines demandes du marketing, et enfin proposer des adaptations ou de nouvelles options pour ce qui n’était pas directement réalisable.

Une fois ces besoins traduits en évaluations de faisabilité, puis en propositions de designs ou d’interactions sous forme de croquis format A4, il fallait mettre en images tout ce qui avait été créé pour le confronter aux personnes compétentes.

Deuxième phase : Maquettes graphiques

Ce sont ces croquis, servant à fixer les idées sur le papier et permettant déjà d’en faire une sorte de « tri mental« , qui ont servi de base à la réalisation des maquettes graphiques.
Ces dernières montrent les principales branches de la démo. Elles ont été réalisées afin de susciter les avis des ingénieurs, des chefs de service et des décisionnaires dans les différents domaines concernés par l’IHM.

Image de fond de l'écran de démarrage de la démo qui n'apparaît que quelques secondes ...L'écran de démarrage : les cubes au centre sont en 3D et servent d'éléments de navigation principaux dans la démoToujours l'écran de démarrage - On voit en bas les deux niveaux de la barre de navigation qui apparaît au survol des trois derniers pixels de la liste d'alarmes tout en bas

Les cubes en 3D temps réel pivotent ...... et révèlent un aperçu de la sous-vue principale de chaque section ainsi qu'un menu de toutes les sous-sectionsLe menu apparaît à côté du cube en fin d'animation 3D - Il est prévu que les sous-sections soient également affichées

Une vue du site éolien - La carte figure le service de cartes en ligne de Microsoft - La démo devait fonctionner en mode hors connexion - il s'agit donc d'un montageLa même vue avec une infobulle personnalisée qui fournit des informations contextuelles et synthétiques sur les équipements représentés par des icônesLa vue Single Line Diagram - Il fallait montrer les capacités graphiques très évoluées du 64bit tout en respectant la lisibilité des conventions de représentation métier

Une autre vue Single Line Diagram - Y figurent cette-ci des schémas de relevés de données, des listes d'évènements système, etc ... le tout en temps réelUn autre type de vue : la vue maintenance - Elle permet de monitorer les éléments actifs de relevés des informations sur les éléments contrôlés - Pour faire simple, on s'assure que les appareils de mesure fonctionnent bienLa vue Analyse : elle permet, par le biais des relevés d'informations en temps réel, de réaliser des calculs et de les présenter sous une forme donnée, comme des tableaux, de manière synthétique

Ecran d’accueil, barre d’icône regroupant les principales fonctionnalités génériques, barre de navigation synthétique pour un affichage rapide des vues métier cruciales, répartitions hiérarchique, vues marketing, vues analytiques, vues opérateur, pertinence des informations affichées, profondeur des niveaux d’accès, nombre de clics, etc …

Ce sont quelques-uns des nombreux points qui ont dû être pris en compte dans la réalisation de ces maquettes afin de valider tous les points décisifs qui font une interface graphique fonctionnelle et agréable a utiliser :
design graphique et design d’interaction, pertinence des données présentées, accessibilité, rapidité d’exécution.
Tous ces points, et d’autres, réunis, forment ce qu’on appelle l’expérience utilisateur.

Tous les intervenants et décisionnaires de cette démo doivent la valider à un fort pourcentage [3], avant de passer au stade de réalisation fonctionnelle de la démo elle-même.

Chaque image contient des détails texte sur les points qu’elle illustre, n’hésitez pas à cliquer pour en savoir plus …

[1] http://www.iconics.fr/
[2] http://www.iconics.com/
[3] parce que certains points nécessitent d’en équilibrer d’autres, tout le monde ne peut être pleinement satisfait, il faut le savoir et le communiquer au client dès le début de la démarche