Interfaccia utente riprogettata di Zilliz Cloud: un’esperienza utente semplificata e intuitiva
Mentre l'AI continua a rimodellare i settori, la domanda di tecnologie potenti e scalabili come i database vettoriali, capaci di supportare applicazioni GenAI di livello enterprise, è aumentata rapidamente. Gli sviluppatori hanno bisogno di strumenti che siano non solo robusti, ma anche intuitivi, che permettano loro di creare e mantenere rapidamente le proprie applicazioni AI senza complessità inutili.
Con questo in mente, abbiamo introdotto l'ultima release di Zilliz Cloud, ricca di numerose funzionalità e miglioramenti pronti per l'enterprise, tra cui multi-replica, migrazione dei dati e un motore di ricerca vettoriale Cardinal migliorato per un incremento delle prestazioni di 10 volte. Inoltre, abbiamo lanciato un'interfaccia utente (UI) completamente riprogettata. Questa nuova UI è più pulita, più intuitiva e progettata specificamente per semplificare i flussi di lavoro, ridurre il carico cognitivo e aumentare la produttività. Consente agli sviluppatori di concentrarsi sull'innovazione invece di rimanere impantanati nelle complessità.
In questo blog, esploreremo le motivazioni alla base della nostra revisione della UI, presenteremo le modifiche che abbiamo apportato e discuteremo come questa nuova interfaccia possa aiutare gli sviluppatori a lavorare in modo più efficiente. Condivideremo anche spunti tratti dalla nostra esperienza nella riprogettazione di una UI per un prodotto SaaS, offrendo indicazioni ai product designer che cercano di migliorare le interazioni degli utenti nei propri progetti.
Guarda il video qui sotto per una rapida panoramica della nostra nuovissima UI per Zilliz Cloud.
Riallineare la nostra visione: la spinta verso una riprogettazione della UI
Da quando abbiamo iniziato a lavorare su Zilliz Cloud nel 2022, ci siamo evoluti rapidamente, introducendo nuove versioni quasi ogni mese ed espandendo le nostre funzionalità per affrontare i punti critici dei nostri utenti, offrire benefici tangibili e aiutarli a raggiungere un successo maggiore. Inizialmente, avevamo fissato obiettivi ambiziosi per l'esperienza utente, ma il ritmo serrato dei rilasci di funzionalità li ha spesso relegati in secondo piano. Questa è una sfida comune nelle aziende tecnologiche, dove la pressione a rilasciare continuamente può mettere in ombra gli obiettivi fondamentali di UX.
Il nostro backlog Jira, pieno di attività di ottimizzazione, ha evidenziato la necessità di una pausa significativa e di una rivalutazione. Man mano che il mercato dei database vettoriali diventa sempre più competitivo, mantenere un'ottima esperienza utente è fondamentale per la soddisfazione degli utenti e per restare davanti alla concorrenza.
Questa consapevolezza ci ha portato alla decisione di intraprendere una riprogettazione completa della UI. Questo importante aggiornamento non riguarda solo il miglioramento dell'estetica; implica il ripensamento di funzionalità, moduli e usabilità complessiva per garantire che la nostra piattaforma sia intuitiva e potente. Puntiamo a fornire agli sviluppatori uno strumento che sia funzionale e piacevole da usare.
Identificare i problemi attraverso un audit UI/UX completo
Nell'ambito del nostro impegno a perfezionare l'esperienza utente, abbiamo condotto un audit UI&UX completo che ha comportato una revisione dettagliata di tutti i componenti, i moduli e i flussi di lavoro all'interno della nostra interfaccia. Questo processo ci ha aiutato a documentare i punti critici principali e le aree che necessitavano di miglioramento, garantendo un approccio olistico allo sforzo di riprogettazione.
Durante questo audit, abbiamo scoperto che molti problemi di usabilità derivavano da una libreria di componenti obsoleta, priva di flessibilità e rimasta indietro rispetto alle tendenze attuali del web design, con librerie CSS popolari come Tailwind, Radix e shadcn/ui alla guida verso approcci di design più puliti, leggeri e pragmatici.
Affrontando direttamente queste discrepanze, il team di design ha avvertito una forte urgenza di rinnovare i nostri componenti. Il contrasto tra i nostri stili esistenti e questi design moderni e snelli era evidente, sottolineando la necessità di un aggiornamento significativo. Riconoscendo che correggere la vecchia libreria avrebbe solo portato a ulteriori complicazioni, abbiamo deciso di riprogettare da zero la nostra libreria di componenti UI. Questa mossa strategica mira a rimanere al passo con le tendenze e a consentire ai nostri team di design e front-end di aggiornare le interfacce in modo più efficiente, portando infine a un prodotto migliore che risuoni con gli utenti e migliori la loro esperienza complessiva.
Lancio di un design UI snello e adatto agli sviluppatori per una migliore esperienza utente
Ora che abbiamo identificato i fattori trainanti alla base della nostra decisione di riprogettare la UI e i problemi che abbiamo riscontrato, vediamo cosa abbiamo cambiato e in che modo questi cambiamenti possono aiutare i nostri utenti.
Una navigazione semplificata e chiara
Il nostro precedente sistema di navigazione, suddiviso tra una barra laterale per le funzionalità a livello di progetto e un menu superiore per le attività organizzative, presentava alcune sfide chiave:
Gli utenti spesso faticavano a distinguere tra attività organizzative e attività a livello di progetto.
L’angolo in alto a sinistra era ingombro di elementi con frequenze di accesso variabili, creando rumore inutile.
Alcuni elementi dell’interfaccia non hanno funzionalità, il che andava contro il nostro obiettivo di mantenere un design pulito ed efficiente.
Di seguito è riportato un confronto del sistema di navigazione prima e dopo la riprogettazione della UI. Per affrontare le sfide sopra indicate, abbiamo ristrutturato completamente la navigazione. Questo ha incluso il riordino dell’angolo in alto a sinistra per ridurre il rumore visivo e la rimozione degli elementi non funzionali per creare un’interfaccia più pulita.
Confronto del sistema di navigazione prima e dopo la riprogettazione della UI.png
Oltre a risolvere questi problemi, abbiamo introdotto ulteriori miglioramenti:
Funzionalità categorizzate: Le funzionalità a livello di progetto sono ora raggruppate in categorie logiche, rendendo più rapido e semplice individuare strumenti e informazioni.
Maggiore chiarezza della barra laterale: Le icone ridisegnate della barra laterale offrono un aspetto più pulito e intuitivo, riducendo l’attrito nella navigazione.
Il nuovo sistema è ora più organizzato, snello e intuitivo, offrendo un’esperienza utente più chiara ed efficiente.
Un design moderno basato su schede
Il feedback degli utenti ha evidenziato due problemi principali nel nostro design precedente: tabelle densamente popolate che sopraffacevano gli utenti e pagine vuote che risultavano spoglie, soprattutto sugli schermi più grandi. Abbiamo introdotto un design basato su schede nella nuova UI per affrontare questi estremi. Questo approccio bilancia perfettamente densità informativa e semplicità, organizzando i contenuti in schede strutturate e visivamente distinte.
Ogni scheda agisce come un blocco autonomo con elementi intuitivi come pulsanti e link. Questo semplifica le interazioni e garantisce che le azioni essenziali siano facili da individuare ed eseguire. Raggruppando le informazioni in modo logico, le schede trasformano dataset complessi in unità scansionabili e ordinate, riducendo il disordine visivo e migliorando l’usabilità.
Il risultato è una UI tanto funzionale quanto visivamente coinvolgente, che consente agli sviluppatori di rimanere concentrati sul proprio lavoro senza distrazioni.
Un design moderno basato su schede
Maggiore chiarezza con la coerenza basata su griglia
Per dare struttura e armonia alla nuova UI, abbiamo implementato un rigoroso sistema a griglia che organizza ogni elemento con precisione. Questo approccio garantisce un perfetto allineamento orizzontale e verticale, dando vita a un layout pulito, rifinito e intuitivo. Creando una base visivamente coerente, la griglia riduce il carico cognitivo, rendendo più facile per gli utenti elaborare le informazioni senza sforzo.
Oltre a migliorare l’esperienza utente, questo sistema a griglia ottimizza il processo di design del nostro team. Layout coerenti tra le pagine delle funzionalità significano che designer e sviluppatori front-end possono lavorare in modo più prevedibile ed efficiente quando creano nuove pagine o aggiungono funzionalità. I componenti sono dimensionati con cura per consentire combinazioni flessibili, garantendo che l’interfaccia rimanga coesa e adattabile a diversi scenari.
Questa attenzione all’allineamento e alla struttura non si limita a perfezionare l’aspetto e l’esperienza della piattaforma: supporta anche la scalabilità. Gli sviluppatori possono rimanere concentrati sulla creazione di funzionalità senza essere distratti da incoerenze, mentre gli utenti usufruiscono di un’interfaccia utente funzionale e visivamente armoniosa.
Maggiore chiarezza con la coerenza basata sulla griglia
Un’interfaccia più intuitiva
Man mano che il nostro prodotto cresceva ed evolveva, lo sviluppo dal ritmo serrato portava spesso a riutilizzare pattern di design familiari per rispettare scadenze ravvicinate. Sebbene questo approccio garantisse coerenza in tutta la piattaforma, a volte ciò avveniva a scapito dell’intuizione dell’utente. Le pagine che apparivano coese non risultavano sempre naturali da navigare, rivelando un’intuizione chiave: la coerenza da sola non basta. La vera usabilità richiede di bilanciare coerenza e adattabilità, personalizzando il design per dare priorità all’esperienza utente.
Siamo passati a un approccio più flessibile nell’organizzazione delle informazioni per rendere l’interfaccia più intuitiva. Ad esempio, abbiamo perfezionato i design delle tabelle per adattarli a diversi tipi di oggetti, assicurando che ogni tabella rifletta meglio i dati che mostra. Allo stesso modo, abbiamo ristrutturato cluster di informazioni dense in layout basati su schede, offrendo un contesto più chiaro ed elementi più azionabili.
Allontanandoci da un approccio unico per tutti, stiamo creando un’interfaccia che risulta flessibile e focalizzata sull’utente, aiutando gli sviluppatori a navigare tra le attività in modo più efficiente e a godere al tempo stesso di un’esperienza più fluida e intuitiva.
Un’interfaccia più intuitiva
Le fondamenta del nostro redesign: una libreria UI semplificata e scalabile
Il successo del nostro redesign della UI non sarebbe stato possibile senza la creazione di una libreria UI semplificata e scalabile. Basata sulla Atomic Design Theory, questa libreria reinterpreta gli elementi fondamentali del design—colori, font, ombre e componenti—in un sistema coeso che garantisce coerenza in tutta la piattaforma, rimanendo al contempo adattabile a diversi casi d’uso.
Una libreria UI semplificata e scalabile
Questa nuova libreria UI è stata costruita con la consapevolezza che sia gli utenti sia i team interni interagiscono con il prodotto come un insieme unitario, non come parti isolate. Perfezionando l’aspetto e l’esperienza complessivi e rielaborando i componenti per garantire un’integrazione fluida in tutte le interfacce, abbiamo creato un sistema che ha affrontato le sfide del nostro redesign e ha posto le basi per un prodotto più intuitivo, efficiente e pronto per il futuro.
Di seguito, delineiamo alcune strategie chiave e best practice alla base del nostro approccio.
Rinnovare la palette di colori per un look moderno
Il primo passo nell’ottimizzazione della UI è stato rinnovare la palette di colori per riflettere un’estetica più moderna e dinamica. Il feedback degli utenti ha rivelato che il design precedente appariva datato, quindi abbiamo introdotto un blu più luminoso e ispirato alla tecnologia per sostituire la tonalità più spenta. La regolazione della luminosità e del valore degli altri colori ha aggiunto un tono più fresco e giovanile, riducendo al contempo la dipendenza da colori scuri e grigi.
Abbiamo dato priorità al bianco e nero come colori principali per ottenere un look minimalista ed equilibrato, utilizzando proporzioni attentamente controllate per contrasto e armonia. I contrasti forti sono stati ammorbiditi con contorni e ombre sottili, conferendo ai componenti un aspetto più leggero. Questi aggiornamenti conferiscono all’interfaccia un aspetto curato e contemporaneo, allineandola agli standard di design odierni e migliorandone l’appeal visivo.
Aggiornare la palette dei colori per un look moderno
Migliorare l'usabilità con un uso attento dello spazio negativo
Un uso efficace dello spazio negativo, o spazio bianco, è essenziale per ridurre l’ingombro e creare un’interfaccia più confortevole e intuitiva per l’utente. Nel nostro redesign, abbiamo incorporato un padding generoso in tutti i componenti per migliorare leggibilità e usabilità. Ad esempio, i pulsanti ora hanno una larghezza minima definita, assicurando che etichette più brevi come "Edit" e "Save" rimangano visivamente bilanciate e facili da usare, indipendentemente dalla lunghezza del testo.
Questo uso deliberato dello spazio negativo alleggerisce l’interfaccia, rendendola visivamente invitante e intuitiva da navigare. Abbiamo anche perfezionato le icone con design più sottili ed eleganti, aumentando la sensazione di leggerezza quando combinate con altri elementi.
Migliorare l'usabilità con un uso attento dello spazio negativo
Abbracciare la semplicità: “Less is More”
La semplicità non è solo una preferenza di design: è una strategia deliberata. Nella nostra nuova UI, abbiamo abbracciato il principio della moderazione per creare un sistema di design snello e focalizzato. Icone e loghi sono stati standardizzati a una singola dimensione e scalati dinamicamente in diversi contesti. Questa filosofia “less is more” ci consente di offrire design coerenti ed eleganti senza aggiungere complessità inutile.
Abbiamo semplificato il sistema restringendo la palette dei colori a un insieme selezionato di tonalità essenziali, utilizzando solo ombre chiare e scure e limitando la gerarchia del testo a soli quattro livelli. Questi vincoli deliberati riducono l’ingombro visivo, rendono l’interfaccia più facile da mantenere e migliorano la produttività dei designer, offrendo al contempo un’esperienza utente pulita e piacevole.
Abbracciare la semplicità - Less is More
Adattare i componenti per moduli più intelligenti e intuitivi
Nel design, viviamo secondo il principio secondo cui "Form follows Function." Ogni componente nella nostra libreria UI deve avere un ruolo chiaro e mirato. Questo significa progettare componenti in grado di supportare input e scenari utente diversi per prodotti database. Ad esempio, come elemento fondamentale di qualsiasi piattaforma SaaS, i moduli sono essenziali: sono il luogo in cui gli utenti gestiscono attività critiche come l’inserimento di dettagli di pagamento, codici sicuri, link, password e altro ancora.
Abbiamo introdotto componenti di input variabili progettati per adattarsi perfettamente a requisiti diversi, così da migliorare chiarezza e usabilità. Questi campi di input sono intuitivi e visivamente chiari, aiutando gli utenti a completare le attività rapidamente e con precisione. Dando priorità alla funzionalità e all’efficienza dell’utente, abbiamo reso fluidi anche i workflow più complessi, riducendo l’attrito e garantendo che l’esperienza complessiva rimanga senza sforzo.
Adattare i componenti per moduli più intelligenti e intuitivi
Inoltre, abbiamo aggiunto un tipo speciale di Alert specificamente per gli aggiornamenti relativi ai costi, rendendoli facili da distinguere dalle normali notifiche di sistema. Questo significa che gli utenti possono riconoscere rapidamente avvisi importanti su addebiti, fatturazione o utilizzo, senza confonderli con messaggi di routine.
Adattare i componenti per moduli più intelligenti e intuitivi 2
Definire linee guida di design chiare e coerenti
Una grande libreria di componenti non riguarda solo la correzione delle incoerenze di stile: riguarda la semplificazione dei flussi di lavoro e la promozione di una migliore collaborazione tra designer e sviluppatori. In precedenza, linee guida poco chiare per l’utilizzo dei componenti causavano spesso confusione e attriti durante le revisioni del design e lo sviluppo. Abbiamo introdotto regole chiare e pratiche per superare queste sfide, eliminando l’ambiguità, risolvendo il debito tecnico e riducendo inutili scambi avanti e indietro. Queste regole consentono ai team di dedicare meno tempo a discutere i dettagli e più tempo a concentrarsi su attività significative, producendo deliverable di design coerenti ed efficienti.
Ecco le regole chiave che abbiamo stabilito:
Larghezza dei pulsanti: Tutti i pulsanti ora hanno una larghezza minima per garantire che rimangano utilizzabili e facili da cliccare, indipendentemente dalla lunghezza dell’etichetta.
Pulsanti primari vs. secondari: I pulsanti primari sono sempre almeno larghi quanto i pulsanti secondari, anche se questi ultimi hanno un testo più lungo, mantenendo l’equilibrio visivo.
Indicatori e suggerimenti dei moduli: Gli indicatori dei campi obbligatori e i suggerimenti dei moduli seguono regole di posizionamento rigorose, rendendo i moduli più intuitivi e accessibili.
Dimensionamento delle finestre modali: Le finestre modali sono limitate a quattro larghezze predefinite, offrendo ai designer flessibilità pur preservando la coerenza visiva.
Queste linee guida vanno oltre l’efficienza: pongono le basi per un’esperienza raffinata e coesa, che risulti naturale e intuitiva per gli utenti.
Cosa ha reso possibile questo redesign
Allineamento del team: una visione condivisa
Ridisegnare una piattaforma non è un compito da poco: è un’iniziativa complessa e su larga scala che può risultare opprimente per designer e sviluppatori. Per affrontare questa complessità, la nostra priorità principale è stata allineare il team. Sebbene partire da una visione chiara sia fondamentale, restare allineati sulla destinazione è ancora più importante. Fin dall’inizio, ci siamo allontanati da supposizioni individuali o preferenze personali e abbiamo adottato un approccio deliberato e collaborativo. Ogni decisione di design è stata valutata attentamente per garantire che servisse i nostri obiettivi di esperienza utente, e ogni modifica è stata revisionata per assicurare che aggiungesse valore significativo al prodotto. Questo focus condiviso ha mantenuto il team coeso e sulla giusta rotta durante tutto il processo.
Passaggi Agile e gestione intelligente delle attività
Bilanciare un redesign su larga scala insieme allo sviluppo continuo di funzionalità richiedeva un flusso di lavoro strategico e agile. Abbiamo suddiviso il progetto in fasi gestibili, dando priorità a una comunicazione chiara e a una gestione efficiente delle attività per garantire progressi senza interrompere la normale iterazione del prodotto.
Passaggi Agile e gestione intelligente delle attività
Un momento cruciale è stata l’Agile UI Implementation Review, durante la quale abbiamo dedicato una giornata a verificare attentamente quanto la UI appena implementata corrispondesse ai piani di design originali. Questa revisione ha identificato oltre 300 incoerenze, che abbiamo documentato in uno Smartsheet su Lark. Ogni problema è stato etichettato con stati operativi come Non risolto, Risolto, Da verificare e Verificato e assegnato a membri specifici del team. Questo processo strutturato ci ha permesso di risolvere e validare tutti i problemi entro una settimana, garantendo che la nuova UI rispettasse i nostri standard di qualità e coerenza.
Imparare dai migliori: design SaaS oltre i database
I prodotti database tradizionali spesso faticano in termini di usabilità, appesantiti da set di funzionalità complessi che possono sopraffare gli utenti. Con il nostro redesign, ci siamo prefissati di guardare oltre le convenzioni della UI/UX specifica per i database. Invece di limitare la nostra prospettiva ai concorrenti, abbiamo ampliato il nostro approccio per abbracciare le migliori pratiche presenti nel design SaaS moderno.
Imparare dai migliori - design SaaS oltre i database
La nostra ricerca è andata oltre il settore dei database, esplorando interfacce provenienti da ambiti come l’elaborazione dei dati, i servizi cloud, le applicazioni di IA e altre piattaforme SaaS leader. Questa prospettiva ampia ci ha fornito insight preziosi su soluzioni innovative e pattern comuni che funzionano in diversi settori.
Un’ultima cosa
Questo redesign è stato un vero lavoro di squadra, reso possibile dalla stretta collaborazione tra designer, ingegneri e molti altri team. Il loro duro lavoro, la loro creatività e la loro dedizione hanno portato l’esperienza di Zilliz Cloud a un livello completamente nuovo, e siamo incredibilmente grati per la passione e l’impegno che ogni membro del team ha apportato a questo progetto.
La nostra missione non si ferma qui: ci impegniamo a perfezionare continuamente Zilliz Cloud e a restare in sintonia con le esigenze dei nostri utenti. Ti invitiamo a esplorare la UI aggiornata e a sperimentare in prima persona i miglioramenti. Il tuo feedback e i tuoi suggerimenti sono preziosissimi per noi, quindi non esitare a condividere le tue opinioni. Insieme, possiamo continuare a rendere Zilliz Cloud migliore per tutti!
Inizia gratuitamente con tutte le nuove funzionalità e i miglioramenti di Zilliz Cloud!
Esplora con il nostro piano gratuito (non è richiesta alcuna carta di credito), oppure prova la nostra trial enterprise di 30 giorni con fino a $200 di crediti.
Abbonati tramite qualsiasi cloud marketplace e ricevi un credito aggiuntivo di $100.
Per informazioni più dettagliate su Zilliz Cloud, visita la nostra documentazione.
Ulteriori letture
Continua a leggere
8 Latest RAG Advancements Every Developer Should Know
Explore eight advanced RAG variants that can solve real problems you might be facing: slow retrieval, poor context understanding, multimodal data handling, and resource optimization.
The Great AI Agent Protocol Race: Function Calling vs. MCP vs. A2A
Compare Function Calling, MCP, and A2A protocols for AI agents. Learn which standard best fits your development needs and future-proof your applications.
Balancing Precision and Performance: How Zilliz Cloud's New Parameters Help You Optimize Vector Search
Optimize vector search with Zilliz Cloud’s level and recall features to tune accuracy, balance performance, and power AI applications.