Mode avancé - ObsConso

Refonte outil de visualisation cartographique Alisé Géomatique

“L’innovation territoriale peut se définir comme une réponse nouvelle à une problématique et/ou un besoin identifiés collectivement dans un territoire, en vue d’apporter une amélioration du bien-être et un développement local durable.”

 

Alisé Géomatique est une entreprise spécialisée dans la production, l’analyse et la représentation de données géographiques et territoriales. Elle oeuvre dans le but d’apporter des réponses concrètes et visuelles aux défis environnementaux du territoire Français.

Alisé cherche à donner du sens aux bases de données à disposition, en fournissant des cartes et des outils d’analyse et de comparaison des territoires en fonction d’indicateurs géographiques. Elle est spécialisée dans trois grands domaines de compétences :

A la suite de la refonte du site Internet d’Alisé Géomatique, Keole est intervenue sur une prestation d’analyse et de préconisations axées User Experience concernant l’outil ObsConso.

Refonte de l’Observatoire

La refonte de l’observatoire Obsconso s’articule autours de trois étapes :

  • Analyse de la plateforme existante et réorganisation de l’espace en maquettes simplistes (wireframing)
  • Maquettage graphique et intégration des couleurs dans l’outil
  • Réalisation d’un modèle intégré en utilisant les langages du web (HTML/CSS)

Analyse et réorganisation

La première étape consiste à analyser et redistribuer l’espace dans l’outil. Elle permet également de comprendre les enjeux de la plateforme, les types d’utilisateurs qui la fréquentent et les fonctionnalités qu’elle leur offre.

Les utilisateurs de la plateforme peuvent être scindés en deux catégories : les utilisateurs avancés, habitués à la lecture de données et la datavisualisation, et les utilisateurs classiques (collectivités territoriales, élus locaux, mairies, public). Les experts ayant accès à de plus nombreuses fonctionnalités que les novices.

Scot du Biterrois - ObsconsoPlateforme ObsConso : un observatoire de données, afin de connaître les enjeux et besoins spécifiques d’un territoire pour l’innovation territoriale

Méthodes

Dans un premier temps, il s’agit d’analyser la plateforme existante (étape souvent appelée Audit UX). Cet audit est souvent réalisé à l’aide de méthodes expertes, dites règles heuristiques. Pour ce faire, nous utilisons les 10 règles heuristiques de Nielsen, qui se déclinent en dix points à vérifier :

  • visibilité de statut du système (garder l’utilisateur informé de sa position sur le site, l’application, ou dans le processus en cours),
  • utilisation d’un langage approprié au contexte : le système se doit de parler un langage conventionnel, compréhensible par tous les utilisateurs (concerne également l’ordre des éléments),
  • contrôle et liberté de l’utilisateur : la possibilité pour l’utilisateur de rectifier ses erreurs, et de personnaliser un minimum son espace de travail,
  • consistance et respect des standards (normalisation),
  • prévention et gestion des erreurs,
  • identifier plutôt que mémoriser : les objets, actions et options doivent être largement visibles, l’utilisateur ne doit pas se rappeler d’une fonctionnalité,
  • flexibilité et efficacité d’utilisation : la plateforme se doit d’offrir des raccourcis pour faciliter les tâches des utilisateurs expérimentés,
  • esthétique et minimalisme : notion de hiérarchisation des contenus selon leur importance,
  • fonctions d’aide (reconnaissance, diagnostic, récupération des messages d’erreur),
  • aide et documentation : tutoriels, spécifications, agents intelligents et documents techniques sont autant de moyens pour aider l’utilisateur dans ses tâches sur la plateforme.

Wireframing

Obconso - Wireframing et proposition par Keole

L’outil, qui présentait trop d’options et de possibilités offertes par le système Lizmap, se doit d’être épuré dans le cadre d’une utilisation classique (sans connaissances géomatiques). Certains codes que l’on retrouve dans les applications classiques (bouton fermer, croix en haut à droite) n’étaient pas respectés, et l’application ne suivait pas toujours ses propres codes établis (cohérence visuelle).

L’accent est donc mis sur les données présentes sur le tableau de bord, et la facilité de défilement et de visualisation. Chaque graphique sélectionné sur le tableau de bord prend son sens et modifie la carte à son côté. Il nous semble nécessaire de faire apparaître les graphiques un par un, en défilement contrôlé, afin de faciliter la compréhension.

Dans la proposition effectuée, l’application retrouve très simplement de son sens grâce à un mode simple et un mode expert, une barre de boutons explicite et un système de défilement contrôlé pour les graphiques.

Cette première étape, présentée de façon simpliste, permet de s’accorder avec le client sur les fonctionnalités à garder et à épurer, et de ne mettre en lumière que la partie ergonomique de l’application.

 

Maquettage graphique

Cette deuxième étape intervient à la suite du Wireframing et permet d’établir les couleurs et l’iconographie en fonction des besoins et de la charte graphique définie.

Les couleurs sombres présentes sur la version actuelle de l’application ont été conservées et étendues à toute l’interface, facilitant la lisibilité des données. Les couleurs bleu et orange permettent à l’utilisateur de déterminer le mode dans lequel se trouve l’application. Les données chiffrées et les données actives sont mises en valeur grâce à ces couleurs d’accentuation. Le blanc reste la couleur favorite des textes et des indicateurs non actifs. Des icônes simples et universelles de la librairie Material Design (Google) sont également utilisées pour la navigation.

Mode simplifié - ObsConso

Couleurs sombres, important contraste, utilisation d’une couleur d’accentuation selon le mode et un défilement contrôlé pour chaque donnée de droite en lien avec la carte à gauche.

Intégration

Cette troisième et dernière étape permet d’intégrer en contexte les idées retenues et pouvoir les essayer au sein de la plateforme. Cette étape, réalisée avec les langages du web, HTML et CSS, permet au client de récupérer directement les styles et de pouvoir les intégrer sur son système spécifique en fin de prestation.

Nous tenons à remercier Alisé Géomatique et son équipe pour sa confiance dans le cadre de cette refonte ergonomique.

 

A propos du projet

  • Alisé Géomatique
  • Février 2018
  • Voir le projet
  • UX Design - Refonte - Application Web

Voir d'autres projets réalisés par Keole