Interfaz de usuario rediseñada de Zilliz Cloud: una experiencia de usuario simplificada e intuitiva
A medida que la IA continúa transformando industrias, la demanda de tecnologías potentes y escalables como las bases de datos vectoriales, capaces de respaldar aplicaciones de GenAI a nivel empresarial, se ha disparado. Los desarrolladores necesitan herramientas que no solo sean robustas, sino también intuitivas, que les permitan crear y mantener sus aplicaciones de IA rápidamente sin complejidad innecesaria.
Con esto en mente, presentamos la versión más reciente de Zilliz Cloud, que viene repleta de numerosas funciones y mejoras listas para empresas, incluidas multirréplica, migración de datos y un motor de búsqueda vectorial Cardinal mejorado para un aumento de rendimiento de 10x. Además, hemos lanzado una interfaz de usuario (UI) completamente rediseñada. Esta nueva UI es más limpia, más intuitiva y está diseñada específicamente para optimizar los flujos de trabajo, reducir la carga cognitiva y aumentar la productividad. Permite a los desarrolladores concentrarse en la innovación en lugar de quedar atrapados en complejidades.
En este blog, exploraremos las motivaciones detrás de nuestra renovación de la UI, presentaremos los cambios que hemos realizado y analizaremos cómo esta nueva interfaz puede ayudar a los desarrolladores a trabajar de manera más eficiente. También compartiremos aprendizajes de nuestra experiencia rediseñando una UI para un producto SaaS, ofreciendo orientación a diseñadores de producto que buscan mejorar las interacciones de usuario en sus propios proyectos.
Mira el video a continuación para ver rápidamente nuestra nueva UI para Zilliz Cloud.
Reorientando nuestra visión: el impulso hacia un rediseño de la UI
Desde que comenzamos a trabajar en Zilliz Cloud en 2022, hemos evolucionado rápidamente, presentando nuevas versiones casi todos los meses y ampliando nuestras funciones para abordar los puntos débiles de nuestros usuarios, ofrecer beneficios tangibles y ayudarlos a lograr un mayor éxito. Al principio, establecimos objetivos ambiciosos de experiencia de usuario, pero el ritmo acelerado de lanzamientos de funciones a menudo los relegaba a un segundo plano. Este es un desafío común en las empresas tecnológicas, donde la presión por entregar continuamente puede eclipsar los objetivos fundamentales de UX.
Nuestro backlog de Jira, lleno de tareas de optimización, puso de manifiesto la necesidad de hacer una pausa importante y reevaluar. A medida que el mercado de bases de datos vectoriales se vuelve cada vez más competitivo, mantener una gran experiencia de usuario es crucial para la satisfacción de los usuarios y para mantenerse por delante de la competencia.
Esta toma de conciencia nos llevó a la decisión de emprender un rediseño integral de la UI. Esta importante actualización no se trata solo de mejorar la estética; implica replantear funcionalidades, módulos y la usabilidad general para garantizar que nuestra plataforma sea intuitiva y potente. Nuestro objetivo es proporcionar a los desarrolladores una herramienta que sea funcional y agradable de usar.
Identificación de problemas mediante una auditoría integral de UI/UX
Como parte de nuestro compromiso de perfeccionar la experiencia de usuario, realizamos una auditoría integral de UI&UX que implicó una revisión detallada de todos los componentes, formularios y flujos de trabajo dentro de nuestra interfaz. Este proceso nos ayudó a documentar puntos críticos de dolor y áreas que necesitaban mejora, garantizando un enfoque holístico para el esfuerzo de rediseño.
Durante esta auditoría, descubrimos que muchos problemas de usabilidad provenían de una biblioteca de componentes desactualizada que carecía de flexibilidad y se había quedado atrás respecto a las tendencias actuales de diseño web, con bibliotecas CSS populares como Tailwind, Radix y shadcn/ui liderando el avance hacia enfoques de diseño más limpios, ligeros y pragmáticos.
Al enfrentar estas discrepancias de frente, el equipo de diseño sintió una gran urgencia por renovar nuestros componentes. El contraste entre nuestros estilos existentes y estos diseños modernos y optimizados era llamativo, lo que subrayaba la necesidad de una actualización significativa. Al reconocer que parchear la biblioteca antigua solo provocaría más complicaciones, decidimos rediseñar nuestra biblioteca de componentes de UI desde cero. Este movimiento estratégico consiste en mantenernos al día con las tendencias y permitir que nuestros equipos de diseño y front-end actualicen las interfaces de manera más eficiente, lo que en última instancia conduce a un mejor producto que conecta bien con los usuarios y mejora su experiencia general.
Implementación de un diseño de UI optimizado y fácil de usar para desarrolladores para una mejor experiencia de usuario
Ahora que hemos identificado los factores impulsores detrás de nuestra decisión de rediseñar la UI y los problemas que encontramos, veamos qué hemos cambiado y cómo estos cambios pueden ayudar a nuestros usuarios.
Una navegación simplificada y clara
Nuestro sistema de navegación anterior, dividido entre una barra lateral para funciones a nivel de proyecto y un menú superior para tareas organizativas, presentaba algunos desafíos clave:
Los usuarios a menudo tenían dificultades para diferenciar entre tareas organizativas y tareas a nivel de proyecto.
La esquina superior izquierda estaba abarrotada de elementos con distintas frecuencias de acceso, creando ruido innecesario.
Algunos elementos de la interfaz carecen de funcionalidad, lo que iba en contra de nuestro objetivo de mantener un diseño limpio y eficiente.
A continuación se muestra una comparación del sistema de navegación antes y después del rediseño de la UI. Para abordar los desafíos anteriores, reestructuramos por completo la navegación. Esto incluyó despejar la esquina superior izquierda para reducir el ruido visual y eliminar elementos no funcionales para crear una interfaz más limpia.
Comparación del sistema de navegación antes y después del rediseño de la UI.png
Además de resolver estos problemas, introdujimos mejoras adicionales:
Funciones categorizadas: Las funciones a nivel de proyecto ahora están agrupadas en categorías lógicas, lo que hace que sea más rápido y fácil localizar herramientas e información.
Mayor claridad de la barra lateral: Los iconos rediseñados de la barra lateral ofrecen un aspecto más limpio e intuitivo, reduciendo la fricción en la navegación.
El nuevo sistema ahora es más organizado, optimizado e intuitivo, y proporciona una experiencia de usuario más clara y eficiente.
Un diseño moderno basado en tarjetas
Los comentarios de los usuarios revelaron dos problemas importantes en nuestro diseño anterior: tablas densamente cargadas que abrumaban a los usuarios y páginas en blanco que se sentían escasas, especialmente en pantallas más grandes. Introdujimos un diseño basado en tarjetas en la nueva UI para abordar estos extremos. Este enfoque equilibra perfectamente la densidad de información y la simplicidad, organizando el contenido en tarjetas estructuradas y visualmente distintivas.
Cada tarjeta actúa como un bloque autónomo con elementos intuitivos como botones y enlaces. Esto simplifica las interacciones y garantiza que las acciones esenciales sean fáciles de identificar y realizar. Al agrupar la información de forma lógica, las tarjetas convierten conjuntos de datos complejos en unidades escaneables y ordenadas, reduciendo el desorden visual y mejorando la usabilidad.
El resultado es una UI tan funcional como visualmente atractiva, que permite a los desarrolladores mantenerse concentrados en su trabajo sin distracciones.
Un diseño moderno basado en tarjetas
Mayor claridad con consistencia basada en cuadrícula
Para aportar estructura y armonía a la nueva UI, hemos implementado un sistema de cuadrícula estricto que organiza cada elemento con precisión. Este enfoque garantiza una alineación horizontal y vertical perfecta, dando como resultado un diseño limpio, pulido e intuitivo. Al crear una base visualmente coherente, la cuadrícula reduce la carga cognitiva, facilitando que los usuarios procesen la información sin esfuerzo.
Más allá de mejorar la experiencia del usuario, este sistema de cuadrícula agiliza el proceso de diseño de nuestro equipo. Los diseños consistentes en todas las páginas de funcionalidades permiten que los diseñadores y desarrolladores front-end trabajen de forma más predecible y eficiente al crear nuevas páginas o añadir funcionalidades. Los componentes se dimensionan cuidadosamente para permitir combinaciones flexibles, lo que garantiza que la interfaz se mantenga cohesiva y adaptable a diferentes escenarios.
Este enfoque en la alineación y la estructura no solo refina la apariencia y la sensación de la plataforma, sino que también favorece la escalabilidad. Los desarrolladores pueden mantenerse centrados en crear funcionalidad sin distraerse con inconsistencias, mientras los usuarios disfrutan de una UI funcional y visualmente armoniosa.
Mayor claridad con la consistencia basada en cuadrícula
Una interfaz más intuitiva
A medida que nuestro producto creció y evolucionó, el desarrollo acelerado a menudo llevó a reutilizar patrones de diseño familiares para cumplir con plazos ajustados. Si bien este enfoque garantizaba la consistencia en toda la plataforma, a veces lo hacía a expensas de la intuición del usuario. Las páginas que se veían cohesivas no siempre resultaban naturales de navegar, lo que reveló una idea clave: la consistencia por sí sola no es suficiente. La verdadera usabilidad requiere equilibrar la consistencia con la adaptabilidad, adaptando el diseño para priorizar la experiencia del usuario.
Pasamos a un enfoque más flexible para organizar la información con el fin de hacer que la interfaz fuera más intuitiva. Por ejemplo, refinamos los diseños de tablas para ajustarlos a distintos tipos de objetos, asegurando que cada tabla refleje mejor los datos que muestra. De manera similar, reestructuramos grupos densos de información en diseños basados en tarjetas, ofreciendo un contexto más claro y elementos más accionables.
Al alejarnos de un enfoque único para todo, estamos creando una interfaz que se siente flexible y centrada en el usuario, ayudando a los desarrolladores a navegar por las tareas de manera más eficiente mientras disfrutan de una experiencia más fluida e intuitiva.
Una interfaz más intuitiva
La base de nuestro rediseño: una biblioteca de UI optimizada y escalable
Nuestro exitoso rediseño de UI no habría sido posible sin la creación de una biblioteca de UI optimizada y escalable. Basada en la Teoría del Diseño Atómico, esta biblioteca replantea los elementos centrales del diseño —colores, fuentes, sombras y componentes— en un sistema cohesivo que garantiza la consistencia en toda la plataforma, al tiempo que sigue siendo adaptable a diversos casos de uso.
Una biblioteca de UI optimizada y escalable
Esta nueva biblioteca de UI se creó entendiendo que tanto los usuarios como los equipos internos interactúan con el producto como un todo unificado, no como piezas aisladas. Al refinar la apariencia y la sensación general y reelaborar los componentes para garantizar una integración fluida en todas las interfaces, creamos un sistema que abordó los desafíos de nuestro rediseño y sentó las bases para un producto más intuitivo, eficiente y preparado para el futuro.
A continuación, describimos algunas estrategias clave y mejores prácticas detrás de nuestro enfoque.
Actualizar la paleta de colores para una apariencia moderna
El primer paso para optimizar la UI fue actualizar la paleta de colores para reflejar una estética más moderna y dinámica. Los comentarios de los usuarios revelaron que el diseño anterior se sentía anticuado, por lo que introdujimos un azul más brillante e inspirado en la tecnología para reemplazar el tono más apagado. Ajustar la luminosidad y el valor de otros colores añadió un tono más fresco y juvenil, a la vez que redujo la dependencia de colores oscuros y grises.
Priorizamos el blanco y negro como colores principales para lograr una apariencia minimalista y equilibrada, utilizando proporciones cuidadosamente controladas para el contraste y la armonía. Los contrastes fuertes se suavizaron con contornos y sombras sutiles, dando a los componentes una apariencia más ligera. Estas actualizaciones aportan una sensación pulida y contemporánea a la interfaz, alineándola con los estándares de diseño actuales y mejorando su atractivo visual.
Renovación de la paleta de colores para un aspecto moderno
Mejora de la usabilidad con un uso cuidadoso del espacio negativo
El uso eficaz del espacio negativo, o espacio en blanco, es esencial para reducir el desorden y crear una interfaz más cómoda y fácil de usar. En nuestro rediseño, incorporamos un padding generoso en todos los componentes para mejorar la legibilidad y la usabilidad. Por ejemplo, los botones ahora tienen un ancho mínimo establecido, lo que garantiza que las etiquetas más cortas como "Edit" y "Save" se mantengan visualmente equilibradas y sean fáciles de usar, independientemente de la longitud del texto.
Este uso deliberado del espacio negativo despeja la interfaz, haciéndola visualmente atractiva e intuitiva de navegar. También refinamos los iconos con diseños más delgados y elegantes, lo que añade una sensación de ligereza cuando se combinan con otros elementos.
Mejora de la usabilidad con un uso cuidadoso del espacio negativo
Adoptar la simplicidad: “Menos es más”
La simplicidad no es solo una preferencia de diseño: es una estrategia deliberada. En nuestra nueva UI, adoptamos el principio de moderación para crear un sistema de diseño optimizado y enfocado. Los iconos y logotipos se han estandarizado a un único tamaño y se escalan dinámicamente en diferentes contextos. Esta filosofía de “menos es más” nos permite ofrecer diseños cohesivos y elegantes sin añadir complejidad innecesaria.
Hemos simplificado el sistema reduciendo la paleta de colores a un conjunto selecto de tonos esenciales, usando solo sombras claras y oscuras, y limitando la jerarquía de texto a solo cuatro niveles. Estas restricciones deliberadas reducen el desorden visual, facilitan el mantenimiento de la interfaz y aumentan la productividad de los diseñadores, al tiempo que ofrecen una experiencia de usuario limpia y agradable.
Adoptar la simplicidad - Menos es más
Adaptación de componentes para formularios más inteligentes e intuitivos
En diseño, nos guiamos por el principio de que "la forma sigue a la función". Cada componente de nuestra biblioteca de UI debe tener un papel claro y útil. Esto significa diseñar componentes que puedan admitir diversas entradas de usuario y escenarios para productos de bases de datos. Por ejemplo, como elemento central de cualquier plataforma SaaS, los formularios son esenciales: son donde los usuarios gestionan tareas críticas como introducir detalles de pago, códigos seguros, enlaces, contraseñas y más.
Introdujimos componentes de entrada variables diseñados para adaptarse sin problemas a diferentes requisitos con el fin de mejorar la claridad y la usabilidad. Estos campos de entrada son intuitivos y visualmente claros, lo que ayuda a los usuarios a completar tareas de forma rápida y precisa. Al priorizar la funcionalidad y la eficiencia del usuario, hemos logrado que incluso los flujos de trabajo más complejos se sientan fluidos, reduciendo la fricción y garantizando que la experiencia general siga siendo sencilla.
Adaptación de componentes para formularios más inteligentes e intuitivos
Además, hemos añadido un tipo especial de Alert específicamente para actualizaciones relacionadas con costes, lo que facilita distinguirlas de las notificaciones habituales del sistema. Esto significa que los usuarios pueden reconocer rápidamente alertas importantes sobre cargos, facturación o uso, sin confundirlas con mensajes rutinarios.
Adaptación de componentes para formularios más inteligentes e intuitivos 2
Definición de directrices de diseño claras y consistentes
Una gran biblioteca de componentes no se trata solo de corregir inconsistencias de estilo: se trata de simplificar los flujos de trabajo y fomentar una mejor colaboración entre diseñadores y desarrolladores. Anteriormente, las directrices poco claras para usar componentes a menudo causaban confusión y fricción durante las revisiones de diseño y el desarrollo. Introdujimos reglas claras y prácticas para superar estos desafíos que eliminan la ambigüedad, resuelven la deuda técnica y reducen los intercambios innecesarios. Estas reglas permiten a los equipos dedicar menos tiempo a debatir detalles y más tiempo a centrarse en tareas significativas, lo que da como resultado entregables de diseño consistentes y eficientes.
Estas son las reglas clave que hemos establecido:
Ancho de los botones: Todos los botones ahora tienen un ancho mínimo para garantizar que sigan siendo utilizables y fáciles de hacer clic, independientemente de la longitud de la etiqueta.
Botones primarios vs. secundarios: Los botones primarios siempre son al menos tan anchos como los botones secundarios, incluso si estos últimos tienen texto más largo, manteniendo el equilibrio visual.
Indicadores y ayudas de formularios: Los indicadores de campos obligatorios y las ayudas de formularios siguen reglas estrictas de ubicación, lo que hace que los formularios sean más intuitivos y accesibles.
Tamaño de las ventanas modales: Las ventanas modales están limitadas a cuatro anchos predefinidos, lo que brinda flexibilidad a los diseñadores mientras preserva la consistencia visual.
Estas directrices van más allá de la eficiencia: sientan las bases para una experiencia pulida y cohesiva que se siente natural e intuitiva para los usuarios.
Qué hizo posible este rediseño
Alineación del equipo: una visión compartida
Rediseñar una plataforma no es una tarea menor: es un esfuerzo complejo y a gran escala que puede resultar abrumador para diseñadores y desarrolladores. Para navegar esta complejidad, nuestra máxima prioridad fue alinear al equipo. Si bien comenzar con una visión clara es crucial, mantenerse alineados respecto al destino es aún más importante. Desde el principio, nos alejamos de las suposiciones individuales o las preferencias personales y adoptamos un enfoque deliberado y colaborativo. Cada decisión de diseño se evaluó cuidadosamente para garantizar que sirviera a nuestros objetivos de experiencia de usuario, y cada modificación se revisó para asegurar que añadiera valor significativo al producto. Este enfoque compartido mantuvo al equipo cohesionado y encaminado durante todo el proceso.
Pasos ágiles y gestión inteligente de tareas
Equilibrar un rediseño a gran escala junto con el desarrollo continuo de funcionalidades requirió un flujo de trabajo estratégico y ágil. Dividimos el proyecto en fases manejables, priorizando una comunicación clara y una gestión eficiente de tareas para asegurar el progreso sin interrumpir la iteración regular del producto.
Pasos ágiles y gestión inteligente de tareas
Un momento decisivo fue la Agile UI Implementation Review, donde dedicamos un día a comprobar cuidadosamente qué tan de cerca la nueva UI implementada coincidía con los planes de diseño originales. Esta revisión identificó más de 300 inconsistencias, que documentamos en una Smartsheet en Lark. Cada problema se etiquetó con estados accionables como Sin resolver, Resuelto, Por verificar y Verificado y se asignó a miembros específicos del equipo. Este proceso estructurado nos permitió resolver y validar todos los problemas en una semana, asegurando que la nueva UI cumpliera con nuestros estándares de calidad y consistencia.
Aprender de los mejores: diseño SaaS más allá de las bases de datos
Los productos de bases de datos tradicionales a menudo tienen dificultades con la usabilidad, lastrados por conjuntos de funcionalidades complejos que pueden abrumar a los usuarios. Con nuestro rediseño, nos propusimos mirar más allá de las convenciones de UI/UX específicas de bases de datos. En lugar de limitar nuestra perspectiva a los competidores, ampliamos nuestro enfoque para adoptar las mejores prácticas presentes en el diseño SaaS moderno.
Aprender de los mejores - Diseño SaaS más allá de las bases de datos
Nuestra investigación fue más allá de la industria de las bases de datos, explorando interfaces de campos como el procesamiento de datos, los servicios en la nube, las aplicaciones de IA y otras plataformas SaaS líderes. Esta perspectiva amplia nos brindó información invaluable sobre soluciones innovadoras y patrones comunes que funcionan en distintos sectores.
Una última cosa
Este rediseño fue un verdadero esfuerzo de equipo, hecho posible gracias a la estrecha colaboración entre diseñadores, ingenieros y muchos otros equipos. Su arduo trabajo, creatividad y dedicación han elevado la experiencia de Zilliz Cloud a un nivel completamente nuevo, y estamos increíblemente agradecidos por la pasión y el compromiso que cada miembro del equipo aportó a este proyecto.
Nuestra misión no termina aquí: estamos comprometidos a seguir perfeccionando Zilliz Cloud y a mantenernos atentos a las necesidades de nuestros usuarios. Te invitamos a explorar la interfaz de usuario actualizada y a experimentar las mejoras de primera mano. Tus comentarios y sugerencias son invaluables para nosotros, así que no dudes en compartir tus ideas. ¡Juntos podemos seguir haciendo que Zilliz Cloud sea mejor para todos!
Empieza gratis con todas las nuevas funciones y mejoras de Zilliz Cloud!
Explora con nuestro nivel gratuito (no se requiere tarjeta de crédito) o prueba nuestra versión empresarial de 30 días con hasta $200 en créditos.
Suscríbete a través de cualquier marketplace en la nube y recibe un crédito adicional de $100.
Para obtener información más detallada sobre Zilliz Cloud, visita nuestra documentación.
Lecturas adicionales
Sigue leyendo
From Vector Database to Vector Lakebase
Zilliz offers a fully managed Vector Lakebase powered by Milvus, unifying real-time vector search, lake-scale discovery, and Al data operations.
Why Deepseek is Waking up AI Giants Like OpenAI And Why You Should Care
Discover how DeepSeek R1's open-source AI model with superior reasoning capabilities and lower costs is disrupting the AI landscape and challenging tech giants like OpenAI.
DeepRAG: Thinking to Retrieval Step by Step for Large Language Models
Discover DeepRAG, an advanced retrieval-augmented generation (RAG) model that improves LLM accuracy by retrieving only essential data through step-by-step reasoning.