Design d'application web pour Viking Conseil

  • Web-design
  • UX
  • Univers visuel

Client : Viking Conseil, fondé par Joseph de Vilmarest
.
Domaine : Aider ses clients à mieux gérer leur besoin électrique. Viking Conseil développe une solution de prévision dite adaptative, en mesure de s’adapter aux instabilités de notre environnement.
.
La mission : Réaliser une application desktop permettant de visualiser sa consommation électrique passée et de pouvoir faire des prévisions.
.
En collaboration avec : Charles Bordet, Data Champ’, à la gestion des données, au développement (R Shiny) et en tant que chef de projet. Et Diane Wattiez, Mahii Conception, à l’intégration front-end
.
Mon rôle : Créer une maquette avec un parcours utilisateur (UX) simple et un univers visuel attractif (UI) pour rendre la future application agréable à utiliser.

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.

L'utilisateur

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

Présentation de l'ensemble de l'application

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 :

Présentation du bouton aide et du tooltips associé

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 :

Présentation du 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. D'autant plus que la plupart des utilisateurs auront déjà fait connaissance de 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 solution de ces concurrents. Pourtant, c'est sur la page tableau de bord que le visiteur arrive en premier après sa connexion.

Les informations qui sont présentes sur cette page concernent la consommation effective. Et c'est sur cette page qu'on peut mettre à jour les données.

Plus les données sont à jour, plus le prévisionnel pourra être fiable ensuite.

C’est pour cela que cette page sert d’accueil, il est important que l’utilisateur ait une vue rapide dessus, qu'il puisse vérifier que tout est en ordre avant d'aller générer son prévisionnel si besoin.

Présentation de la page Tableau de bord et de sa modale Mise à jour

On y retrouve le menu (5).

Ensuite 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.

L’utilisateur a immédiatement toutes les informations qu’il lui faut pour savoir où il en est et rafraichir ses données si besoin.

En (9) se trouve deux indicateurs importants (qui peuvent varier selon le client) et une rapide présentation de l’application.

(10) - Sont ensuite visibles les différents graphiques 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) et 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.

Design d'un champ lorsqu'il y a une erreur de format de fichier

(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 prennent en compte les nouvelles données importées.

La page Prévision

Présentation de la page Prévision et de sa modale Importer des variables

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, il n’est pas possible de mettre à jour les données réels 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 permettront de simuler des changements dans l'environnement qui pourraient impacter la 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.BCDEFGH). 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 bien 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

Présentation des différents éléments de la charte graphique

Viking conseil ne disposait que d’un logo (21) comme base d’identité graphique.

Il ne disposait que du logo en format JPEG sur fond blanc et n’avait ni les références typographiques ni celles des couleurs. Heureusement, le logo était suffisamment grand pour lui permettre d'être utilisable.

(21.A) - 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 faire sobre, le choix de l'orange et du vert était relativement évident. Ce 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.