La conception de cette maquette commence par une chose : comprendre ce qu’elle doit montrer et permettre de faire.
Joseph, Viking Conseil, est à l’origine des différents calculs qui permettront à ses clients de suivre leur consommation électrique. Ce qui fait sa différence, c'est de vouloir proposer une visualisation prévisionnelle, qui tient compte de variables, pour aider son client à anticiper sa consommation dans un monde instable.
L’application doit afficher clairement les résultats, mais aussi de guider l’utilisateur pour qu’il puisse fournir toutes les données nécessaires aux calculs.
Ce n'est pas une application tout public. Le profil utilisateur type est une personne qui s’en sert dans le cadre de son travail. C'est un.e professionnel.le à l’aise avec le web et qui sera amené à utiliser cette application de manière régulière. Il/elle en aura une utilisation Desktop.
Décryptons le résultat final
L’ensemble de l’application a été pensé pour éviter la confusion entre la partie à jour et la partie prévisionnelle. Et ça donne ça :
- Une page de connexion
- Page 1 - Partie visualisation des données à jour (+ modale 1)
- Page 2 - Partie visualisation prévisionnelle (+ modale 2)
L’utilisateur ne peut naviguer qu’entre deux pages et chacune ne contient qu’une action majeure à faire : un bouton spécifique qui ouvre une modale permettant d’importer des fichiers.
Dans ce projet-là, l'intérêt de se servir de modales est de permettre de différencier clairement certaines actions à faire, tout en limitant le nombre de pages et leur complexité.
Enfin, pour guider l'utilisateur sans surcharger l'écran, ce petit symbole est présent un peu partout :
Au survol, un petit encart apparait (qu’on appelle tooltips) qui permet d'expliquer la fonction de chaque élément à côté duquel il se trouve.
Le menu
Zoomons sur le menu :
(1) - Tableau de bord, page d’accueil traitant des données effectives
(2) - Prévision, page qui concerne le prévisionnel
Pour éviter toute confusion, dans le nom de la page sur laquelle l’utilisateur se trouve est colorée en bleue et est soulignée (comme ici avec la page Prévision).
(3.) - Dans le menu, ce symbole n’est pas un tooltips, mais un bouton (vert au survol). Il permet d’ouvrir une modale (3.A) qui présente la société Viking conseil (3.B) avec le lien du site web (3.C). L’intérêt d’utiliser une modale est de pouvoir développer le sujet sans encombrer l’interface de l’application. La plupart des utilisateurs auront déjà fait connaissance avec Viking conseil, autant que ce soit discret.
(4) - Le dernier élément est un bouton de déconnexion. Au survol, un tooltips apparait permettant de préciser explicitement la nature du bouton.
La page tableau de bord
La force de Viking Conseil, c'est la partie prévisionnelle. C'est ce qui démarque cette application de ces concurrents.
Pourtant, c'est sur la page tableau de bord que le visiteur arrive en premier après sa connexion.
La raison est que plus les données sont à jour, plus le prévisionnel pourra être fiable ensuite.
Et c'est sur cette page que l'on peut mettre à jour les données.
C’est pour cela qu'il est important que l’utilisateur ait une vue rapide dessus. Il faut qu'il puisse vérifier que tout est en ordre et à jour avant d'aller générer son prévisionnel.
Sur cette page se trouve le menu (5).
Juste en dessous se trouve une barre bleue. C’est l’élément le plus coloré de la page pour bien attirer l’attention. On y retrouve : la dernière date du jeu de données complet (6) et un bouton qui permet de mettre à jour les données (7.). En dessous, la date de la dernière importation de données (8) est indiquée.
Dès le début, et d'un coup d'œil, l’utilisateur a les informations principales nécessaires à l'analyse des graphiques présents sur l'appli.
Ensuite se trouve deux indicateurs importants (qui peuvent varier selon le client) et une rapide présentation de l’application (9).
Puis différents graphiques (10) sont présents, permettant de visualiser les données.
Il est possible d’utiliser des filtres (11) pour affiner ses visualisations. Mais ils n’agissent que sur les données contenues dans le même bloc gris (10) qu’eux. C’est ce qui donne de la flexibilité à l’utilisateur : les filtres peuvent agir sur plusieurs graphiques à la fois sans forcément impacter l’ensemble de la page.
Pour une bonne compréhension de l’appli, un titre, suivi d’un court texte (12), présente chaque visualisation (13). Pour une meilleure lecture des données, certains graphiques permettent de voir précisément chaque résultat au survol (14) (tooltips). Des légendes (15) sont présentes lorsque c’est nécessaire.
Modale : mettre à jour les données
Si l’utilisateur a cliqué sur le bouton “mettre à jour” (7.), une modale va s’ouvrir (7.A). Un titre (7.B) lui indique directement ce qu’il doit faire, ici : Mise à jour des données.
Il y a ensuite trois étapes bien distinctes :
(7.C) - Un champ pour importer son fichier. En dessous est inscrit le format que doit avoir le fichier pour être compatible avec l'outil.
Si le format n’est pas le bon, le contour du champ devient orange et un message d’erreur explique pourquoi l'opération ne peut pas fonctionner. L’utilisateur se rendra compte très vite de son erreur et pourra la corriger.
(7.D) - Une fois le fichier importé, un graphique va apparaitre sur la droite.
(7.E) - L’utilisateur est invité à vérifier la cohérence des données présentes sur la visualisation qui vient juste d'être générée.
(7.F) - Une fois vérifié, il peut soit cliquer sur "Mise à jour", soit sur "Annuler". Ensuite la modale disparait automatiquement pour revenir à la page initiale (7.H).
Une croix en haut à droite (7.G) est prévue pour sortir de la modale à tout moment. Ça équivaut à l'action "Annuler", mais c'est intéressant de la conserver, car notre regard est habitué à chercher une croix en haut à droite pour sortir d'une fenêtre.
Une fois sortie de la modale, toutes les visualisations du tableau de bord (page 1) prennent en compte les nouvelles données importées.
La page Prévision
La page prévision comporte encore une fois le menu (5) et la barre bleue. Mais seule la date du dernier jeu de données complet (6) est présente. Il s'agit juste d'un rappel, pour éviter toute confusion avec la page 1, il n’est pas possible de mettre à jour les données réelles sur cette page-là.
Ensuite, bien en évidence sur un fond bleu clair, un bouton “importer vos variables” (16.) permet d’ouvrir la modale (16.A) correspondante. Ces variables servent à simuler des changements qui pourraient impacter la future consommation d’électricité de l’utilisateur.
Toujours sur la page prévision, un titre et un court texte (17) explique que la visualisation de la prévision (18) sera généré qu’une fois une variable importée. Un bouton “téléchargement de la prévision” (19) s’affichera en même temps que le graphique.
(20) - En fin de page, l’utilisateur a la possibilité de pouvoir télécharger l’historique de ses prévisionnels et des jeux de données associés.
Importer des variables (modale)
Lorsque l'utilisateur clique sur le bouton “importer vos variables” (16.), il ouvre une modale (16.A). Elle est construite sur le même modèle (16.B) que celle des mises à jour (7.A). Garder une mise en page et un fonctionnement similaires facilitent la vie de l'utilisateur qui sera familier avec la marche à suivre. Seul le titre change et le bouton n'affiche plus "Mise à jour" mais "Calculer les prévisions".
Lorsqu’une modale s’ouvre, elle cache une grande partie de la page initiale. Pour ne pas confondre la modale des variables (16.A) de celle des mises à jour (7.A), le fond de celle-ci a été mis en bleu.
Une fois la modale refermée, un graphique prévisionnel est généré sur la page Prévision et le bouton “télécharger la prévision” affiché (18 et 19).
La charte graphique
Viking conseil ne disposait que d’un logo en format JPG (21) comme base d’identité graphique.
(21.A) - Pour l'application, j’ai d'abord choisi une typographie qui s’approche de celle utilisée pour le mot Viking dans le logo. Mais c’est une typographie avec empattement, ce qui pourrait vite faire un peu décaler dans une application moderne. Ce genre de typographie est plutôt associé à l'univers de l'impression (livres classiques, journaux) que du web. Je m’en suis donc servie uniquement pour les titres. Cette typographie existant en version sans empattement, je l'ai utilisé pour le reste du contenu. L’équilibre des deux permet de rester moderne tout en dégageant une vraie identité et en étant cohérent avec le logo.
(21.B) - Toujours pour m'assurer cette cohérence, j’ai ensuite utilisé une pipette pour extraire les couleurs bleue et le gris du logo. J’ai complété la palette avec un gris plus clair, pour les grands aplats, et un orange et un vert pour les différents éléments à faire ressortir. La demande était de rester sobre, je n'ai pas cherché l'extravagance.
L'orange et du vert sont des couleurs familières que l'on peut facilement associer à des messages d’erreurs ou de validations.
(21.D) - Il y a peu d’icône dans l’application, mais ce petit hexagone avec un point d’interrogation à l’intérieur se retrouve un peu partout. Son design est évidemment un clin d’œil au logo et à Rshiny, qui est l’outil utilisé pour créer cette application.
Évolution
Il faudra être attentif aux retours des utilisateurs, que ce soit d’un point de vue UX, lisibilité et fonctionnalité à rajouter. Dans cette version, nous avons déjà essayé d'anticiper le futur pour que ce jeune outil puisse être réactif. Il a fallu trouver un équilibre entre ce que propose actuellement la solution et la possibilité de pouvoir la faire évoluer rapidement.
Par exemple, les indicateurs mis en avant sur la page Tableau de bord (9), peuvent être adaptés selon le client et il est possible d’en mettre plus que deux. Les blocs gris contenants filtres et visualisations (10) dans le tableau de bord peuvent être plus nombreux et personnalisés. Si demain Joseph met en place d'autres visualisations, il n'aura pas à faire obligatoirement de grosse refonte pour les incorporer à l'existant.
Conclusion
Si cette application vous semble évidente dans sa manière de fonctionner, c’est qu'elle est réussie.
Même si cette application ne dispose pas d'une grande quantité de fonctionnalités, faire en sorte qu'un outil interactif paraisse simple et logique, c’est toujours un challenge.
Il faut toujours que l'utilisateur sache où il est, ce qu'il doit faire et qu'il sache pourquoi une action ne marche pas. Pour ça, il ne faut pas oublier de mettre un contenu adapté et pertinent. Et les aides et messages d'erreurs au bon endroit. C'est comme ça qu'on donne, discrètement, une bonne expérience à nos clients.