Interface utilisateur repensée de Zilliz Cloud : une expérience utilisateur simplifiée et intuitive
Alors que l’IA continue de transformer les secteurs, la demande pour des technologies puissantes et évolutives comme les bases de données vectorielles, capables de prendre en charge des applications GenAI de niveau entreprise, a explosé. Les développeurs ont besoin d’outils non seulement robustes, mais aussi intuitifs, leur permettant de créer et de maintenir rapidement leurs applications d’IA sans complexité inutile.
Dans cette optique, nous avons lancé la dernière version de Zilliz Cloud, qui intègre de nombreuses fonctionnalités et améliorations prêtes pour l’entreprise, notamment la multi-réplication, la migration de données et un moteur de recherche vectorielle Cardinal amélioré pour un gain de performance de 10x. De plus, nous avons déployé une interface utilisateur (UI) entièrement repensée. Cette nouvelle UI est plus épurée, plus intuitive et spécialement conçue pour rationaliser les workflows, réduire la charge cognitive et accroître la productivité. Elle permet aux développeurs de se concentrer sur l’innovation plutôt que de se laisser freiner par les complexités.
Dans ce blog, nous explorerons les motivations qui ont conduit à notre refonte de l’UI, présenterons les changements que nous avons apportés et expliquerons comment cette nouvelle interface peut aider les développeurs à travailler plus efficacement. Nous partagerons également les enseignements tirés de notre expérience de refonte d’une UI pour un produit SaaS, afin d’offrir des conseils aux concepteurs de produits souhaitant améliorer les interactions utilisateur dans leurs propres projets.
Regardez la vidéo ci-dessous pour un aperçu rapide de notre toute nouvelle UI pour Zilliz Cloud.
Réaligner notre vision : l’élan derrière une refonte de l’UI
Depuis que nous avons commencé à travailler sur Zilliz Cloud en 2022, nous avons rapidement évolué, en introduisant de nouvelles versions presque chaque mois et en étendant nos fonctionnalités afin de répondre aux points de douleur de nos utilisateurs, d’apporter des bénéfices concrets et de les aider à obtenir davantage de succès. Au départ, nous nous étions fixé des objectifs ambitieux en matière d’expérience utilisateur, mais le rythme soutenu des sorties de fonctionnalités les a souvent relégués au second plan. C’est un défi courant dans les entreprises technologiques, où la pression de livrer en continu peut éclipser les objectifs fondamentaux d’UX.
Notre backlog Jira, rempli de tâches d’optimisation, a mis en évidence la nécessité de marquer une pause significative et de procéder à une réévaluation. Alors que le marché des bases de données vectorielles devient de plus en plus concurrentiel, maintenir une excellente expérience utilisateur est essentiel pour la satisfaction des utilisateurs et pour garder une longueur d’avance sur la concurrence.
Cette prise de conscience nous a conduits à entreprendre une refonte complète de l’UI. Cette mise à jour majeure ne vise pas seulement à améliorer l’esthétique ; elle implique de repenser les fonctionnalités, les modules et l’utilisabilité globale afin de garantir que notre plateforme soit à la fois intuitive et puissante. Nous voulons fournir aux développeurs un outil fonctionnel et agréable à utiliser.
Identifier les problèmes grâce à un audit UI/UX complet
Dans le cadre de notre engagement à améliorer l’expérience utilisateur, nous avons mené un audit UI&UX complet, comprenant une analyse détaillée de tous les composants, formulaires et workflows de notre interface. Ce processus nous a aidés à documenter les points de douleur critiques et les domaines nécessitant des améliorations, garantissant ainsi une approche holistique de l’effort de refonte.
Au cours de cet audit, nous avons constaté que de nombreux problèmes d’utilisabilité provenaient d’une bibliothèque de composants obsolète, manquant de flexibilité et en retard par rapport aux tendances actuelles du design web, avec des bibliothèques CSS populaires comme Tailwind, Radix et shadcn/ui ouvrant la voie à des approches de design plus épurées, plus légères et plus pragmatiques.
Face à ces incohérences, l’équipe de design a ressenti une forte urgence à remanier nos composants. Le contraste entre nos styles existants et ces designs modernes et épurés était frappant, soulignant la nécessité d’une mise à jour importante. Conscients que corriger l’ancienne bibliothèque ne ferait qu’entraîner davantage de complications, nous avons décidé de repenser notre bibliothèque de composants UI de fond en comble. Cette décision stratégique vise à rester en phase avec les tendances et à permettre à nos équipes design et front-end de mettre à jour les interfaces plus efficacement, afin d’aboutir à un meilleur produit qui trouve un véritable écho auprès des utilisateurs et améliore leur expérience globale.
Déployer un design UI épuré et convivial pour les développeurs afin d’améliorer l’expérience utilisateur
Maintenant que nous avons identifié les facteurs qui ont motivé notre décision de repenser l’UI et les problèmes que nous avons rencontrés, examinons ce que nous avons changé et comment ces changements peuvent aider nos utilisateurs.
Une navigation simplifiée et claire
Notre précédent système de navigation, réparti entre une barre latérale pour les fonctionnalités au niveau du projet et un menu supérieur pour les tâches organisationnelles, présentait quelques défis majeurs :
Les utilisateurs avaient souvent du mal à différencier les tâches organisationnelles des tâches au niveau du projet.
Le coin supérieur gauche était encombré d’éléments aux fréquences d’accès variables, créant un bruit inutile.
Certains éléments de l’interface manquaient de fonctionnalité, ce qui allait à l’encontre de notre objectif de maintenir un design propre et efficace.
Vous trouverez ci-dessous une comparaison du système de navigation avant et après la refonte de l’UI. Pour relever les défis ci-dessus, nous avons entièrement restructuré la navigation. Cela comprenait le désencombrement du coin supérieur gauche afin de réduire le bruit visuel et la suppression des éléments non fonctionnels pour créer une interface plus épurée.
Comparaison du système de navigation avant et après la refonte de l’UI.png
En plus de résoudre ces problèmes, nous avons introduit des améliorations supplémentaires :
Fonctionnalités catégorisées : Les fonctionnalités au niveau du projet sont désormais regroupées en catégories logiques, ce qui permet de localiser les outils et les informations plus rapidement et plus facilement.
Clarté améliorée de la barre latérale : Les icônes de la barre latérale repensées offrent un aspect plus épuré et plus intuitif, réduisant les frictions dans la navigation.
Le nouveau système est désormais plus organisé, plus épuré et plus intuitif, offrant une expérience utilisateur plus claire et plus efficace.
Un design moderne basé sur des cartes
Les retours des utilisateurs ont révélé deux problèmes majeurs dans notre design précédent : des tableaux densément remplis qui submergeaient les utilisateurs et des pages vides qui semblaient clairsemées, en particulier sur les grands écrans. Nous avons introduit un design basé sur des cartes dans la nouvelle UI afin de traiter ces deux extrêmes. Cette approche équilibre parfaitement la densité de l’information et la simplicité, en organisant le contenu dans des cartes structurées et visuellement distinctes.
Chaque carte agit comme un bloc autonome avec des éléments intuitifs tels que des boutons et des liens. Cela simplifie les interactions et garantit que les actions essentielles sont faciles à repérer et à effectuer. En regroupant les informations de manière logique, les cartes transforment des ensembles de données complexes en unités lisibles et soigneusement organisées, réduisant l’encombrement visuel et améliorant l’utilisabilité.
Le résultat est une UI aussi fonctionnelle que visuellement attrayante, permettant aux développeurs de rester concentrés sur leur travail sans distractions.
Un design moderne basé sur des cartes
Une plus grande clarté grâce à la cohérence basée sur une grille
Pour apporter structure et harmonie à la nouvelle UI, nous avons mis en œuvre un système de grille strict qui organise chaque élément avec précision. Cette approche garantit un alignement horizontal et vertical parfait, aboutissant à une mise en page propre, soignée et intuitive. En créant une base visuellement cohérente, la grille réduit la charge cognitive, permettant aux utilisateurs de traiter les informations sans effort.
Au-delà de l’amélioration de l’expérience utilisateur, ce système de grille rationalise le processus de conception de notre équipe. Des mises en page cohérentes sur les pages de fonctionnalités permettent aux designers et aux développeurs front-end de travailler de manière plus prévisible et plus efficace lors de la création de nouvelles pages ou de l’ajout de fonctionnalités. Les composants sont soigneusement dimensionnés afin de permettre des combinaisons flexibles, garantissant que l’interface reste cohérente et adaptable à différents scénarios.
Cette attention portée à l’alignement et à la structure ne se contente pas d’affiner l’apparence et le ressenti de la plateforme : elle soutient également l’évolutivité. Les développeurs peuvent rester concentrés sur la création de fonctionnalités sans être distraits par des incohérences, tandis que les utilisateurs bénéficient d’une UI fonctionnelle et visuellement harmonieuse.
Une plus grande clarté grâce à la cohérence basée sur la grille
Une interface plus intuitive
À mesure que notre produit grandissait et évoluait, le développement rapide conduisait souvent à réutiliser des modèles de conception familiers pour respecter des délais serrés. Si cette approche garantissait la cohérence sur l’ensemble de la plateforme, elle se faisait parfois au détriment de l’intuition utilisateur. Des pages qui semblaient cohérentes n’étaient pas toujours naturelles à parcourir, révélant un enseignement clé : la cohérence seule ne suffit pas. Une véritable utilisabilité exige d’équilibrer cohérence et adaptabilité en adaptant la conception afin de privilégier l’expérience utilisateur.
Nous avons adopté une approche plus flexible de l’organisation de l’information afin de rendre l’interface plus intuitive. Par exemple, nous avons affiné les conceptions de tableaux pour les adapter à différents types d’objets, en veillant à ce que chaque tableau reflète mieux les données qu’il affiche. De même, nous avons restructuré des groupes d’informations denses en mises en page basées sur des cartes, offrant un contexte plus clair et des éléments plus exploitables.
En nous éloignant d’une approche universelle, nous créons une interface qui paraît flexible et centrée sur l’utilisateur, aidant les développeurs à parcourir les tâches plus efficacement tout en profitant d’une expérience plus fluide et plus intuitive.
Une interface plus intuitive
La base de notre refonte : une bibliothèque d’UI rationalisée et évolutive
La réussite de notre refonte de l’UI n’aurait pas été possible sans la création d’une bibliothèque d’UI rationalisée et évolutive. Fondée sur la théorie de l’Atomic Design, cette bibliothèque réinvente les éléments fondamentaux du design — couleurs, polices, ombres et composants — en un système cohérent qui garantit la cohérence sur l’ensemble de la plateforme tout en restant adaptable à divers cas d’utilisation.
Une bibliothèque d’UI rationalisée et évolutive
Cette nouvelle bibliothèque d’UI a été conçue avec l’idée que les utilisateurs comme les équipes internes interagissent avec le produit comme un tout unifié, et non comme des éléments isolés. En affinant l’apparence et le ressenti globaux et en retravaillant les composants pour assurer une intégration fluide sur toutes les interfaces, nous avons créé un système qui répondait aux défis de notre refonte et posait les bases d’un produit plus intuitif, efficace et prêt pour l’avenir.
Ci-dessous, nous présentons quelques stratégies clés et bonnes pratiques qui sous-tendent notre approche.
Rafraîchir la palette de couleurs pour un look moderne
La première étape de l’optimisation de l’UI a consisté à rafraîchir la palette de couleurs afin de refléter une esthétique plus moderne et dynamique. Les retours des utilisateurs ont révélé que la conception précédente semblait dépassée ; nous avons donc introduit un bleu plus lumineux, inspiré de la technologie, pour remplacer la teinte plus terne. L’ajustement de la luminosité et de la valeur des autres couleurs a ajouté un ton plus frais et plus jeune, tout en réduisant la dépendance aux couleurs sombres et aux gris.
Nous avons privilégié le noir et le blanc comme couleurs principales afin d’obtenir un look minimaliste et équilibré, en utilisant des proportions soigneusement contrôlées pour le contraste et l’harmonie. Les contrastes marqués ont été adoucis par des contours et des ombres subtils, donnant aux composants une apparence plus légère. Ces mises à jour apportent à l’interface un aspect soigné et contemporain, l’alignant sur les standards de design actuels et renforçant son attrait visuel.
Rafraîchir la palette de couleurs pour un look moderne
Améliorer l’utilisabilité grâce à une utilisation réfléchie de l’espace négatif
Une utilisation efficace de l’espace négatif, ou espace blanc, est essentielle pour réduire l’encombrement et créer une interface plus confortable et conviviale. Dans notre refonte, nous avons intégré des marges internes généreuses dans l’ensemble des composants afin d’améliorer la lisibilité et l’utilisabilité. Par exemple, les boutons disposent désormais d’une largeur minimale définie, ce qui garantit que les libellés plus courts comme « Modifier » et « Enregistrer » restent visuellement équilibrés et faciles à utiliser, quelle que soit la longueur du texte.
Cette utilisation délibérée de l’espace négatif désencombre l’interface, la rendant visuellement accueillante et intuitive à parcourir. Nous avons également affiné les icônes avec des designs plus fins et plus élégants, renforçant la sensation de légèreté lorsqu’elles sont associées à d’autres éléments.
Améliorer l’utilisabilité grâce à une utilisation réfléchie de l’espace négatif
Adopter la simplicité : « Less is More »
La simplicité n’est pas seulement une préférence de conception : c’est une stratégie délibérée. Dans notre nouvelle UI, nous avons adopté le principe de retenue afin de créer un système de design épuré et ciblé. Les icônes et les logos ont été standardisés à une taille unique et mis à l’échelle dynamiquement selon les différents contextes. Cette philosophie « less is more » nous permet de proposer des designs cohérents et élégants sans ajouter de complexité inutile.
Nous avons simplifié le système en réduisant la palette de couleurs à un ensemble sélectionné de tons essentiels, en utilisant uniquement des ombres claires et sombres, et en limitant la hiérarchie du texte à seulement quatre niveaux. Ces contraintes délibérées réduisent l’encombrement visuel, rendent l’interface plus facile à maintenir et améliorent la productivité des designers tout en offrant une expérience utilisateur claire et agréable.
Adopter la simplicité - Less is More
Adapter les composants pour des formulaires plus intelligents et plus intuitifs
En design, nous vivons selon le principe selon lequel « Form follows Function ». Chaque composant de notre bibliothèque UI doit avoir un rôle clair et utile. Cela signifie concevoir des composants capables de prendre en charge des entrées utilisateur et des scénarios variés pour les produits de base de données. Par exemple, en tant qu’élément central de toute plateforme SaaS, les formulaires sont essentiels : c’est là que les utilisateurs effectuent des tâches critiques comme saisir des informations de paiement, des codes sécurisés, des liens, des mots de passe, et plus encore.
Nous avons introduit des composants de saisie variables conçus pour s’adapter parfaitement à différentes exigences afin d’améliorer la clarté et l’utilisabilité. Ces champs de saisie sont intuitifs et visuellement clairs, aidant les utilisateurs à accomplir leurs tâches rapidement et avec précision. En donnant la priorité à la fonctionnalité et à l’efficacité utilisateur, nous avons rendu même les workflows les plus complexes fluides, réduisant les frictions et garantissant que l’expérience globale reste sans effort.
Adapter les composants pour des formulaires plus intelligents et plus intuitifs
De plus, nous avons ajouté un type spécial d’alerte spécifiquement destiné aux mises à jour liées aux coûts, afin de les distinguer facilement des notifications système ordinaires. Cela signifie que les utilisateurs peuvent reconnaître rapidement les alertes importantes concernant les frais, la facturation ou l’utilisation, sans les confondre avec les messages de routine.
Adapter les composants pour des formulaires plus intelligents et plus intuitifs 2
Définir des directives de design claires et cohérentes
Une excellente bibliothèque de composants ne consiste pas seulement à corriger les incohérences de style : elle vise à simplifier les flux de travail et à favoriser une meilleure collaboration entre designers et développeurs. Auparavant, des directives peu claires concernant l’utilisation des composants provoquaient souvent confusion et frictions lors des revues de design et du développement. Nous avons introduit des règles claires et pratiques pour surmonter ces défis, éliminer l’ambiguïté, résoudre la dette technique et réduire les allers-retours inutiles. Ces règles permettent aux équipes de passer moins de temps à débattre des détails et plus de temps à se concentrer sur des tâches significatives, ce qui se traduit par des livrables de design cohérents et efficaces.
Voici les règles clés que nous avons établies :
Largeur des boutons : Tous les boutons ont désormais une largeur minimale afin de garantir qu’ils restent utilisables et faciles à cliquer, quelle que soit la longueur du libellé.
Boutons primaires vs secondaires : Les boutons primaires sont toujours au moins aussi larges que les boutons secondaires, même si ces derniers contiennent un texte plus long, afin de préserver l’équilibre visuel.
Indicateurs et aides de formulaire : Les indicateurs de champs obligatoires et les aides de formulaire suivent des règles de placement strictes, rendant les formulaires plus intuitifs et accessibles.
Dimensionnement des fenêtres modales : Les fenêtres modales sont limitées à quatre largeurs prédéfinies, offrant aux designers de la flexibilité tout en préservant la cohérence visuelle.
Ces directives vont au-delà de l’efficacité : elles posent les bases d’une expérience soignée et cohérente, qui semble naturelle et intuitive aux utilisateurs.
Ce qui a rendu cette refonte possible
Alignement de l’équipe : une vision partagée
Refondre une plateforme n’est pas une mince affaire : c’est un effort complexe et de grande envergure qui peut sembler écrasant pour les designers et les développeurs. Pour naviguer dans cette complexité, notre priorité absolue a été d’aligner l’équipe. S’il est crucial de commencer avec une vision claire, rester alignés sur la destination l’est encore davantage. Dès le départ, nous nous sommes éloignés des suppositions individuelles ou des préférences personnelles et avons adopté une approche délibérée et collaborative. Chaque décision de design a été évaluée avec soin afin de s’assurer qu’elle servait nos objectifs d’expérience utilisateur, et chaque modification a été examinée pour garantir qu’elle apportait une valeur significative au produit. Cette attention partagée a permis à l’équipe de rester cohésive et sur la bonne voie tout au long du processus.
Étapes agiles et gestion intelligente des tâches
Équilibrer une refonte de grande ampleur avec le développement continu de nouvelles fonctionnalités nécessitait un flux de travail stratégique et agile. Nous avons découpé le projet en phases gérables, en donnant la priorité à une communication claire et à une gestion efficace des tâches afin d’assurer la progression sans perturber l’itération régulière du produit.
Étapes agiles et gestion intelligente des tâches
Un moment charnière a été l’Agile UI Implementation Review, au cours duquel nous avons passé une journée à vérifier soigneusement dans quelle mesure l’interface utilisateur nouvellement implémentée correspondait aux plans de design d’origine. Cette revue a permis d’identifier plus de 300 incohérences, que nous avons documentées dans un Smartsheet sur Lark. Chaque problème a été étiqueté avec des statuts actionnables tels que Non résolu, Résolu, À vérifier et Vérifié et attribué à des membres spécifiques de l’équipe. Ce processus structuré nous a permis de résoudre et de valider tous les problèmes en une semaine, garantissant que la nouvelle interface utilisateur respectait nos normes de qualité et de cohérence.
Apprendre des meilleurs : le design SaaS au-delà des bases de données
Les produits de bases de données traditionnels rencontrent souvent des difficultés d’utilisabilité, alourdis par des ensembles de fonctionnalités complexes qui peuvent submerger les utilisateurs. Avec notre refonte, nous avons entrepris de regarder au-delà des conventions de l’UI/UX spécifiques aux bases de données. Plutôt que de limiter notre perspective aux concurrents, nous avons élargi notre approche afin d’adopter les meilleures pratiques du design SaaS moderne.
Apprendre des meilleurs - Le design SaaS au-delà des bases de données
Nos recherches sont allées au-delà du secteur des bases de données, en explorant des interfaces issues de domaines tels que le traitement des données, les services cloud, les applications d’IA et d’autres plateformes SaaS de premier plan. Cette perspective élargie nous a apporté des informations précieuses sur des solutions innovantes et des modèles courants qui fonctionnent dans tous les secteurs.
Une dernière chose
Cette refonte a été un véritable travail d’équipe, rendu possible par l’étroite collaboration entre les designers, les ingénieurs et de nombreuses autres équipes. Leur travail acharné, leur créativité et leur dévouement ont porté l’expérience Zilliz Cloud à un tout autre niveau, et nous sommes incroyablement reconnaissants pour la passion et l’engagement que chaque membre de l’équipe a apportés à ce projet.
Notre mission ne s’arrête pas là : nous nous engageons à améliorer continuellement Zilliz Cloud et à rester à l’écoute des besoins de nos utilisateurs. Nous vous invitons à explorer l’interface utilisateur mise à jour et à découvrir les améliorations par vous-même. Vos commentaires et suggestions nous sont précieux, alors n’hésitez pas à partager vos impressions. Ensemble, nous pouvons continuer à rendre Zilliz Cloud meilleur pour tout le monde !
Commencez gratuitement avec toutes les nouvelles fonctionnalités et améliorations de Zilliz Cloud !
Explorez avec notre offre gratuite (aucune carte de crédit requise), ou essayez notre essai entreprise de 30 jours avec jusqu’à $200 de crédits.
Abonnez-vous via n’importe quelle marketplace cloud et recevez un crédit supplémentaire de $100.
Pour des informations plus détaillées sur Zilliz Cloud, consultez notre documentation.
Lectures complémentaires
Continuer à lire
How to Improve Retrieval Quality for Japanese Text with Sudachi, Milvus/Zilliz, and AWS Bedrock
Learn how Sudachi normalization and Milvus/Zilliz hybrid search improve Japanese RAG accuracy with BM25 + vector fusion, AWS Bedrock embeddings, and practical code examples.
Demystifying the Milvus Sizing Tool
Explore how to use the Sizing Tool to select the optimal configuration for your Milvus deployment.
Milvus/Zilliz + Surveillance: How Vector Databases Transform Multi-Camera Tracking
See how Milvus vector database enhances multi-camera tracking with similarity-based matching for better surveillance in retail, warehouses and transport hubs.