プロジェクトを知る
Aperçu
Cresol est une Banque Coopérative avec des succursales partout dans la région Sud du Brésil.
Le projet consistait dans la reformulation des graphiques et des tableaux d’un website restreint (disponible uniquement aux employés).
Le website était divisé en deux parties, la première étaient les éléments de l’interface. C’est-à-dire, des menus et des onglets qui ne faisaient pas partie du projet. La deuxième, étaient des éléments fournis par un autre logiciel, ceux que j'ai reformulés.
En raison de clauses contractuels, je ne pourrai pas partager des informations confidentielles ou des images du projet.
Le projet
J’ai commencé pour réarranger des éléments afin qu’ils respectent le “modèle Z” occidental de lecture. Depuis la naissance, dans L’Occident, nous apprenons la lecture de gauche à droite et de haut en bas, en formant une espèce de “Z”.
Éléments d'interface en « Z ».
La deuxième étape consistait à donner plus de poids visuel aux éléments selon leur catégories. Des titres et des boutons ont été redimensionnés pour correspondre à la hiérarchie. Des textes et des tableaux, par exemple, ont perdues un peu d’opacité pour sembler secondaires aux titres.
Poids des différents éléments de l'interface.
Après tout ça, j’ai reformulé la division entre les graphiques. Avant, ils étaient placés dans un grand espace vide. Afin que la page n'ait l’air d’un document imprimable et transmette l’idée d’un tableau de bord aux utilisateurs, j’ai ajouté des cartes et des ombres.
Cartes qui divisent différents graphiques.
Les graphiques
To reformulate the colors of the charts, I had to take into consideration some factors :
-
Le branding de Cresol ;
-
Des couleurs du site ;
-
Les couleurs les utilisateurs avait l’habitude de voir dans la version antérieure du site;
-
Les fondamentaux de la Théorie des Couleurs : les sentiments chaque couleur pourrait amener aux utilisateurs : contrairement au vert, le rouge serait toujours interprété inconsciemment comme mauvais, par exemple.
Afin de récréer des formes et éviter les graphiques en camembert couramment utilisés, j’ai réalisé une recherche sur les sites comme Viz Gallery et The Data Visualization Catalogue. Voici l'un des graphiques recréés :
Graphique recréé.
Nielsen’s Heuristics
Enfin, pour la navigation devenir plus fluide et centré sur l'utilisateur, j’ai conduit une évaluation de l’interface en prenant conte les 10 heuristiques de Nielsen, qui a abouti à l'adoption de quelques éléments manqués :
-
Un bouton de retour en haut de la page, de façon que l’utilisateur pourrait être redirectionné à la page antérieure (en accord avec la 3ème Heuristique de Nielsen “Contrôle et liberté”).
Bouton de retour au-dessus du titre.
-
Un breadcrumb pour substituer le bouton de retour aux pages dans lesquelles il y avait plus de deux instances de hiérarchie, de façon que l’utilisateur soit toujours conscient de l'endroit où il se trouve dans le site (en accord avec la 1ère Heuristique de Nielsen “Visibilité du statut, ou état, du système”).
Breadcrumb au-dessus du titre.
-
Des lignes pour diviser les graphiques qu'étaient positionné l’un après l’autre mais ne concernaient pas le même sujet ni la même statistique, de façon que l’utilisateur ne soit pas malavisé et les comprendre comme un bloc unique d’informations (en accord avec la 6ème Heuristique de Nielsen “Reconnaître plutôt que se rappeler”).
Division des graphiques.
Des résultats
Après beaucoup de présentations sollicitant son approbation, le projet est finalement accepté. Le feedback a été extrêmement positive et, en effet, la direction a été surprise d’effet que les simples changements de position des éléments ont délivré à l'utilisateur final.
