Parcours utilisateur
Le parcours utilisateur est conçu pour donner une vision globale d’un bien en quelques étapes, en priorisant les informations les plus utiles dès l’entrée dans l’interface.
Structure de l’interface
La structure est volontairement simple et fonctionnelle, organisée autour de quatre zones principales :
Un cartouche à gauche, qui contient la navigation principale entre les différentes catégories d’informations (environnement, estimation, services, etc.).
Un panneau secondaire, à gauche également, qui affiche les options contextuelles liées à la catégorie sélectionnée dans le cartouche.
Une carte centrale, qui illustre visuellement les données et permet à l’utilisateur de situer et comprendre les informations dans leur contexte géographique.
Un panneau latéral à droite, dédié aux contrôles de la carte (filtres, couches d’affichage) et à des options complémentaires selon les besoins.
Cette organisation en zones permet une lecture claire et rapide, tout en laissant une large place à l’exploration cartographique.
Interfaces
CityScan est disponible en application web et en widget embarqué en marque blanche. Le design responsive s’adapte à différents supports et à des contraintes d’intégration chez les clients, avec une attention particulière à la modularité : hiérarchisation de l’information, gestion des points de rupture et optimisation de l’espace dans chaque composant.
Un outil riche en données, pensé pour être lisible
CityScan rend accessibles un large volume de données sur l’environnement d’un bien, avec des explications synthétiques dans le cartouche à gauche et une illustration directe sur la carte centrale, pour une lecture rapide et contextualisée.
GUI / Design Système
Sur ce projet, nous avons eu la chance de collaborer avec des développeurs, notamment côté front-end, particulièrement expérimentés et impliqués. Leur sensibilité aux enjeux d’accessibilité a permis de pousser plus loin la qualité de l’interface, tant sur le plan technique qu’en termes d’expérience utilisateur.
Couleurs
Le choix d’un fond rouge et texte blanc, dicté par l’identité graphique, présentait des défis de lisibilité et d’accessibilité. Le design a été ajusté pour garantir une expérience claire pour tous.
Textes
Le choix de Roboto répond à des enjeux de lisibilité et de cohérence cross-platform, tout en restant neutre pour faciliter la lecture dans des interfaces riches en informations.
Boutons
L’interface distingue deux styles de boutons afin de hiérarchiser les actions : les boutons pleins pour les actions principales, et les boutons à bordure pour les actions secondaires, plus discrètes.
Radio, checkbox et toggle
Les composants de sélection reposent sur une logique visuelle cohérente et des états explicites, facilitant la compréhension des interactions tout en maintenant une bonne accessibilité.
Input texte
Les champs de saisie privilégient une approche sobre et fonctionnelle, avec des états clairement identifiés (actif, focus, invalide). Les erreurs sont signalées en orange, afin de préserver la lisibilité tout en respectant l’identité graphique de CityScan.
Dropdown et Autocompletion
Les menus déroulants et champs à autocomplétion facilitent la saisie de données structurées ou longues, comme les adresses. Les listes assurent une navigation claire, tandis que l’autocomplétion accélère la saisie, dans un style sobre et cohérent avec les autres composants.
Iconographies
Icones multicouches
L’iconographie adopte un style au trait, simple et lisible. Un traitement en multicouches avec des jeux d’opacité apporte de la profondeur tout en conservant une esthétique légère et cohérente avec l’interface.
Icônes des thématiques & indicateurs
Certaines icônes thématiques sont intégrées sous forme de police d’icônes via IcoMoon, offrant une gestion souple des styles (taille, couleur, survol) tout en garantissant légèreté et cohérence visuelle.
