UI Redesenhada do Zilliz Cloud: Uma Experiência de Usuário Simplificada e Intuitiva
À medida que a IA continua a remodelar setores, a demanda por tecnologias poderosas e escaláveis como bancos de dados vetoriais, capazes de dar suporte a aplicações de GenAI em nível empresarial, disparou. Os desenvolvedores precisam de ferramentas que não sejam apenas robustas, mas também intuitivas, permitindo que criem e mantenham suas aplicações de IA rapidamente, sem complexidade desnecessária.
Com isso em mente, apresentamos o lançamento mais recente do Zilliz Cloud, que vem repleto de inúmeros recursos e aprimoramentos prontos para empresas, incluindo multi-replica, migração de dados e um mecanismo de busca vetorial Cardinal aprimorado para um aumento de desempenho de 10x. Além disso, lançamos uma interface de usuário (UI) completamente redesenhada. Esta nova UI é mais limpa, mais intuitiva e especificamente projetada para simplificar fluxos de trabalho, reduzir a carga cognitiva e aumentar a produtividade. Ela permite que os desenvolvedores se concentrem na inovação, em vez de ficarem presos a complexidades.
Neste blog, exploraremos as motivações para nossa reformulação da UI, apresentaremos as mudanças que fizemos e discutiremos como essa nova interface pode ajudar os desenvolvedores a trabalhar com mais eficiência. Também compartilharemos insights da nossa experiência redesenhando uma UI para um produto SaaS, oferecendo orientações a designers de produto que buscam melhorar as interações dos usuários em seus próprios projetos.
Confira o vídeo abaixo para uma rápida olhada na nossa novíssima UI para o Zilliz Cloud.
Realinhando Nossa Visão: O Impulso para um Redesign da UI
Desde que começamos a trabalhar no Zilliz Cloud em 2022, evoluímos rapidamente, introduzindo novas versões quase mensalmente e expandindo nossos recursos para abordar os pontos problemáticos dos nossos usuários, entregar benefícios tangíveis e ajudá-los a alcançar maior sucesso. Inicialmente, definimos metas ambiciosas de experiência do usuário, mas o ritmo acelerado de lançamentos de recursos muitas vezes as empurrou para segundo plano. Este é um desafio comum em empresas de tecnologia, onde a pressão para entregar continuamente pode ofuscar objetivos fundamentais de UX.
Nosso backlog do Jira, repleto de tarefas de otimização, destacou a necessidade de uma pausa significativa e de uma reavaliação. À medida que o mercado de bancos de dados vetoriais se torna cada vez mais competitivo, manter uma ótima experiência do usuário é crucial para a satisfação dos usuários e para permanecer à frente da concorrência.
Essa percepção levou à nossa decisão de realizar um redesign abrangente da UI. Esta grande atualização não se trata apenas de aprimorar a estética; envolve repensar funcionalidades, módulos e a usabilidade geral para garantir que nossa plataforma seja intuitiva e poderosa. Nosso objetivo é fornecer aos desenvolvedores uma ferramenta que seja funcional e prazerosa de usar.
Identificando Problemas por meio de uma Auditoria Abrangente de UI/UX
Como parte do nosso compromisso de refinar a experiência do usuário, conduzimos uma auditoria abrangente de UI&UX que envolveu uma revisão detalhada de todos os componentes, formulários e fluxos de trabalho dentro da nossa interface. Esse processo nos ajudou a documentar pontos problemáticos críticos e áreas que precisavam de melhoria, garantindo uma abordagem holística para o esforço de redesign.
Durante essa auditoria, descobrimos que muitos problemas de usabilidade surgiam de uma biblioteca de componentes desatualizada que carecia de flexibilidade e ficava para trás em relação às tendências atuais de web design, com bibliotecas CSS populares como Tailwind, Radix e shadcn/ui liderando o movimento rumo a abordagens de design mais limpas, leves e pragmáticas.
Confrontando essas discrepâncias de frente, a equipe de design sentiu uma forte urgência em reformular nossos componentes. O contraste entre nossos estilos existentes e esses designs modernos e simplificados era marcante, destacando a necessidade de uma atualização significativa. Reconhecendo que remendar a biblioteca antiga só levaria a complicações adicionais, decidimos redesenhar nossa biblioteca de componentes de UI do zero. Esse movimento estratégico visa acompanhar as tendências e permitir que nossas equipes de design e front-end atualizem interfaces com mais eficiência, resultando, em última análise, em um produto melhor que ressoe bem com os usuários e aprimore sua experiência geral.
Lançando um design de UI simplificado e amigável para desenvolvedores para uma melhor experiência do usuário
Agora que identificamos os fatores determinantes por trás da nossa decisão de redesenhar a UI e os problemas que encontramos, vamos analisar o que mudamos e como essas mudanças podem ajudar nossos usuários.
Uma navegação simplificada e clara
Nosso sistema de navegação anterior, dividido entre uma barra lateral para recursos em nível de projeto e um menu superior para tarefas organizacionais, apresentava alguns desafios importantes:
Os usuários frequentemente tinham dificuldade em diferenciar entre tarefas organizacionais e tarefas em nível de projeto.
O canto superior esquerdo estava sobrecarregado com elementos com frequências de acesso variadas, criando ruído desnecessário.
Alguns elementos da interface carecem de funcionalidade, o que ia contra nosso objetivo de manter um design limpo e eficiente.
Abaixo está uma comparação do sistema de navegação antes e depois do redesenho da UI. Para enfrentar os desafios acima, reestruturamos completamente a navegação. Isso incluiu desobstruir o canto superior esquerdo para reduzir o ruído visual e remover elementos não funcionais para criar uma interface mais limpa.
Comparação do sistema de navegação antes e depois do redesenho da UI.png
Além de resolver esses problemas, introduzimos melhorias adicionais:
Recursos categorizados: Os recursos em nível de projeto agora estão agrupados em categorias lógicas, tornando mais rápido e fácil localizar ferramentas e informações.
Maior clareza da barra lateral: Ícones redesenhados da barra lateral oferecem uma aparência mais limpa e intuitiva, reduzindo o atrito na navegação.
O novo sistema agora é mais organizado, simplificado e intuitivo, proporcionando uma experiência de usuário mais clara e eficiente.
Um design moderno baseado em cartões
O feedback dos usuários revelou dois grandes problemas em nosso design anterior: tabelas densamente preenchidas que sobrecarregavam os usuários e páginas em branco que pareciam vazias, especialmente em telas maiores. Introduzimos um design baseado em cartões na nova UI para lidar com esses extremos. Essa abordagem equilibra perfeitamente a densidade de informações e a simplicidade, organizando o conteúdo em cartões estruturados e visualmente distintos.
Cada cartão atua como um bloco autônomo com elementos intuitivos, como botões e links. Isso simplifica as interações e garante que as ações essenciais sejam fáceis de identificar e executar. Ao agrupar informações de forma lógica, os cartões transformam conjuntos de dados complexos em unidades escaneáveis e bem organizadas, reduzindo a poluição visual e aprimorando a usabilidade.
O resultado é uma UI tão funcional quanto visualmente envolvente, capacitando os desenvolvedores a manterem o foco no trabalho sem distrações.
Um design moderno baseado em cartões
Maior clareza com consistência baseada em grade
Para trazer estrutura e harmonia à nova UI, implementamos um sistema de grade rigoroso que organiza cada elemento com precisão. Essa abordagem garante alinhamento horizontal e vertical perfeito, resultando em um layout limpo, refinado e intuitivo. Ao criar uma base visualmente consistente, a grade reduz a carga cognitiva, facilitando para os usuários processarem informações sem esforço.
Além de aprimorar a experiência do usuário, esse sistema de grid otimiza o processo de design da nossa equipe. Layouts consistentes nas páginas de recursos significam que designers e desenvolvedores front-end podem trabalhar de forma mais previsível e eficiente ao criar novas páginas ou adicionar recursos. Os componentes são cuidadosamente dimensionados para permitir combinações flexíveis, garantindo que a interface permaneça coesa e adaptável a diferentes cenários.
Esse foco em alinhamento e estrutura não apenas refina a aparência e a sensação de uso da plataforma — ele também oferece suporte à escalabilidade. Os desenvolvedores podem manter o foco na criação de funcionalidades sem se distrair com inconsistências, enquanto os usuários desfrutam de uma UI funcional e visualmente harmoniosa.
Maior clareza com consistência baseada em grid
Uma interface mais intuitiva
À medida que nosso produto cresceu e evoluiu, o desenvolvimento acelerado frequentemente levou à reutilização de padrões de design familiares para cumprir prazos apertados. Embora essa abordagem garantisse consistência em toda a plataforma, às vezes isso acontecia às custas da intuição do usuário. Páginas que pareciam coesas nem sempre pareciam naturais de navegar, revelando um insight importante: consistência por si só não basta. A verdadeira usabilidade exige equilibrar consistência com adaptabilidade, ajustando o design para priorizar a experiência do usuário.
Passamos para uma abordagem mais flexível de organização das informações para tornar a interface mais intuitiva. Por exemplo, refinamos os designs de tabelas para se adequarem a diferentes tipos de objetos, garantindo que cada tabela reflita melhor os dados que exibe. Da mesma forma, reestruturamos agrupamentos densos de informações em layouts baseados em cards, oferecendo contexto mais claro e elementos mais acionáveis.
Ao nos afastarmos de uma abordagem única para todos os casos, estamos criando uma interface que parece flexível e focada no usuário, ajudando desenvolvedores a navegar pelas tarefas com mais eficiência enquanto desfrutam de uma experiência mais fluida e intuitiva.
Uma interface mais intuitiva
A base do nosso redesign: uma biblioteca de UI simplificada e escalável
Nosso redesign de UI bem-sucedido não teria sido possível sem a criação de uma biblioteca de UI simplificada e escalável. Fundamentada na Atomic Design Theory, essa biblioteca reimagina os elementos centrais do design — cores, fontes, sombras e componentes — em um sistema coeso que garante consistência em toda a plataforma, permanecendo adaptável a diversos casos de uso.
Uma biblioteca de UI simplificada e escalável
Essa nova biblioteca de UI foi construída com o entendimento de que tanto os usuários quanto as equipes internas interagem com o produto como um todo unificado, não como partes isoladas. Ao refinar a aparência e a sensação de uso gerais e retrabalhar componentes para garantir integração perfeita em todas as interfaces, criamos um sistema que enfrentou os desafios do nosso redesign e preparou o caminho para um produto mais intuitivo, eficiente e pronto para o futuro.
A seguir, apresentamos algumas estratégias-chave e melhores práticas por trás da nossa abordagem.
Atualizando a paleta de cores para um visual moderno
O primeiro passo para otimizar a UI foi atualizar a paleta de cores para refletir uma estética mais moderna e dinâmica. O feedback dos usuários revelou que o design anterior parecia ultrapassado, então introduzimos um azul mais brilhante, inspirado em tecnologia, para substituir o tom mais opaco. Ajustar a luminosidade e o valor de outras cores adicionou um tom mais fresco e jovem, ao mesmo tempo em que reduziu a dependência de cores escuras e cinzas.
Priorizamos o preto e o branco como as cores principais para alcançar um visual minimalista e equilibrado, usando proporções cuidadosamente controladas para contraste e harmonia. Contrastes fortes foram suavizados com contornos e sombras sutis, dando aos componentes uma aparência mais leve. Essas atualizações trazem uma sensação polida e contemporânea à interface, alinhando-a aos padrões de design atuais e aprimorando seu apelo visual.
Atualizando a Paleta de Cores para um Visual Moderno
Aprimorando a Usabilidade com o Uso Cuidadoso do Espaço Negativo
O uso eficaz do espaço negativo, ou espaço em branco, é essencial para reduzir a desordem e criar uma interface mais confortável e fácil de usar. Em nosso redesign, incorporamos espaçamento generoso entre os componentes para melhorar a legibilidade e a usabilidade. Por exemplo, os botões agora têm uma largura mínima definida, garantindo que rótulos mais curtos como "Editar" e "Salvar" permaneçam visualmente equilibrados e fáceis de interagir, independentemente do comprimento do texto.
Esse uso deliberado do espaço negativo organiza a interface, tornando-a visualmente convidativa e intuitiva de navegar. Também refinamos os ícones com designs mais finos e elegantes, aumentando a sensação de leveza quando combinados com outros elementos.
Aprimorando a Usabilidade com o Uso Cuidadoso do Espaço Negativo
Adotando a Simplicidade: “Menos é Mais”
A simplicidade não é apenas uma preferência de design — é uma estratégia deliberada. Em nossa nova UI, adotamos o princípio da contenção para criar um sistema de design simplificado e focado. Ícones e logotipos foram padronizados em um único tamanho e dimensionados dinamicamente em diferentes contextos. Essa filosofia de “menos é mais” nos permite entregar designs coesos e elegantes sem adicionar complexidade desnecessária.
Simplificamos o sistema ao reduzir a paleta de cores a um conjunto seleto de tons essenciais, usando apenas sombras claras e escuras, e limitando a hierarquia de texto a apenas quatro níveis. Essas restrições deliberadas reduzem a desordem visual, tornam a interface mais fácil de manter e aumentam a produtividade dos designers, ao mesmo tempo em que oferecem uma experiência de usuário limpa e agradável.
Adotando a Simplicidade - Menos é Mais
Adaptando Componentes para Formulários Mais Inteligentes e Intuitivos
No design, seguimos o princípio de que "A forma segue a função." Cada componente em nossa biblioteca de UI deve ter um papel claro e intencional. Isso significa projetar componentes que possam oferecer suporte a diversas entradas de usuários e cenários para produtos de banco de dados. Por exemplo, como elemento central de qualquer plataforma SaaS, os formulários são essenciais — é neles que os usuários realizam tarefas críticas, como inserir detalhes de pagamento, códigos seguros, links, senhas e muito mais.
Introduzimos componentes de entrada variáveis projetados para se adaptar perfeitamente a diferentes requisitos, a fim de melhorar a clareza e a usabilidade. Esses campos de entrada são intuitivos e visualmente claros, ajudando os usuários a concluir tarefas com rapidez e precisão. Ao priorizar a funcionalidade e a eficiência do usuário, fizemos até mesmo os fluxos de trabalho mais complexos parecerem fluidos, reduzindo o atrito e garantindo que a experiência geral permaneça sem esforço.
Adaptando Componentes para Formulários Mais Inteligentes e Intuitivos
Além disso, adicionamos um tipo especial de Alerta especificamente para atualizações relacionadas a custos, tornando-as fáceis de diferenciar das notificações regulares do sistema. Isso significa que os usuários podem reconhecer rapidamente alertas importantes sobre cobranças, faturamento ou uso, sem confundi-los com mensagens rotineiras.
Adaptando Componentes para Formulários Mais Inteligentes e Intuitivos 2
Definindo Diretrizes de Design Claras e Consistentes
Uma ótima biblioteca de componentes não se trata apenas de corrigir inconsistências de estilo — trata-se de simplificar fluxos de trabalho e promover uma melhor colaboração entre designers e desenvolvedores. Anteriormente, diretrizes pouco claras para o uso de componentes frequentemente causavam confusão e atrito durante revisões de design e desenvolvimento. Introduzimos regras claras e práticas para superar esses desafios, que eliminam ambiguidades, resolvem dívida técnica e reduzem idas e vindas desnecessárias. Essas regras permitem que as equipes passem menos tempo debatendo detalhes e mais tempo focando em tarefas significativas, resultando em entregáveis de design consistentes e eficientes.
Aqui estão as principais regras que estabelecemos:
Largura dos botões: Todos os botões agora têm uma largura mínima para garantir que permaneçam utilizáveis e fáceis de clicar, independentemente do tamanho do rótulo.
Botões primários vs. secundários: Botões primários são sempre pelo menos tão largos quanto botões secundários, mesmo que estes tenham textos mais longos, mantendo o equilíbrio visual.
Indicadores e dicas de formulário: Indicadores de campos obrigatórios e dicas de formulário seguem regras rígidas de posicionamento, tornando os formulários mais intuitivos e acessíveis.
Dimensionamento de janelas modais: Janelas modais são limitadas a quatro larguras predefinidas, dando flexibilidade aos designers enquanto preserva a consistência visual.
Essas diretrizes vão além da eficiência — elas estabelecem a base para uma experiência refinada e coesa, que parece natural e intuitiva para os usuários.
O que tornou este redesign possível
Alinhamento da equipe: uma visão compartilhada
Redesenhar uma plataforma não é uma tarefa pequena — é um esforço complexo e de grande escala que pode parecer esmagador para designers e desenvolvedores. Para navegar por essa complexidade, nossa principal prioridade foi alinhar a equipe. Embora começar com uma visão clara seja crucial, manter o alinhamento sobre o destino é ainda mais importante. Desde o início, nos afastamos de suposições individuais ou preferências pessoais e adotamos uma abordagem deliberada e colaborativa. Cada decisão de design foi avaliada cuidadosamente para garantir que atendesse aos nossos objetivos de experiência do usuário, e cada modificação foi revisada para garantir que agregasse valor significativo ao produto. Esse foco compartilhado manteve a equipe coesa e no caminho certo durante todo o processo.
Etapas ágeis e gerenciamento inteligente de tarefas
Equilibrar um redesign em grande escala junto ao desenvolvimento contínuo de funcionalidades exigiu um fluxo de trabalho estratégico e ágil. Dividimos o projeto em fases gerenciáveis, priorizando comunicação clara e gerenciamento eficiente de tarefas para garantir progresso sem interromper a iteração regular do produto.
Etapas ágeis e gerenciamento inteligente de tarefas
Um momento crucial foi a Agile UI Implementation Review, em que passamos um dia verificando cuidadosamente o quanto a UI recém-implementada correspondia aos planos de design originais. Essa revisão identificou mais de 300 inconsistências, que documentamos em uma Smartsheet no Lark. Cada problema foi marcado com status acionáveis, como Não resolvido, Resolvido, A ser verificado e Verificado, e atribuído a membros específicos da equipe. Esse processo estruturado nos permitiu resolver e validar todos os problemas em uma semana, garantindo que a nova UI atendesse aos nossos padrões de qualidade e consistência.
Aprendendo com os melhores: design SaaS além dos bancos de dados
Produtos tradicionais de banco de dados frequentemente enfrentam dificuldades de usabilidade, sobrecarregados por conjuntos complexos de funcionalidades que podem sobrecarregar os usuários. Com nosso redesign, decidimos olhar além das convenções de UI/UX específicas de bancos de dados. Em vez de limitar nossa perspectiva aos concorrentes, ampliamos nossa abordagem para adotar as melhores práticas encontradas no design SaaS moderno.
Aprendendo com os melhores - design SaaS além dos bancos de dados
Nossa pesquisa foi além do setor de bancos de dados, explorando interfaces de áreas como processamento de dados, serviços em nuvem, aplicações de IA e outras plataformas SaaS líderes. Essa perspectiva ampla nos proporcionou insights inestimáveis sobre soluções inovadoras e padrões comuns que funcionam em diferentes setores.
Uma Última Coisa
Este redesign foi um verdadeiro esforço de equipe, viabilizado pela estreita colaboração entre designers, engenheiros e muitas outras equipes. Seu trabalho árduo, criatividade e dedicação elevaram a experiência do Zilliz Cloud a um nível totalmente novo, e somos incrivelmente gratos pela paixão e pelo compromisso que cada membro da equipe trouxe para este projeto.
Nossa missão não termina aqui—estamos comprometidos em refinar continuamente o Zilliz Cloud e permanecer atentos às necessidades dos nossos usuários. Convidamos você a explorar a UI atualizada e experimentar as melhorias em primeira mão. Seu feedback e suas sugestões são inestimáveis para nós, portanto, não hesite em compartilhar suas ideias. Juntos, podemos continuar tornando o Zilliz Cloud melhor para todos!
Comece gratuitamente com todos os novos recursos e aprimoramentos do Zilliz Cloud!
Explore com nosso plano gratuito (sem necessidade de cartão de crédito) ou experimente nosso trial empresarial de 30 dias com até $200 em créditos.
Assine por meio de qualquer marketplace de nuvem e receba um crédito adicional de $100.
Para obter informações mais detalhadas sobre o Zilliz Cloud, visite nossa documentação.
Leitura Adicional
Continue lendo
How Zilliz Ended Up at the Center of NVIDIA’s Unstructured Data Story at GTC 2026
If unstructured data is the context of AI, then the ceiling of AI applications will be set not just by models, but by how mature the infrastructure for unstructured data becomes.
Zilliz Cloud Delivers Better Performance and Lower Costs with Arm Neoverse-based AWS Graviton
Zilliz Cloud adopts Arm-based AWS Graviton3 CPUs to cut costs, speed up AI vector search, and power billion-scale RAG and semantic search workloads.
Vector Databases vs. Key-Value Databases
Use a vector database for AI-powered similarity search; use a key-value database for high-throughput, low-latency simple data lookups.