Zilliz CloudのUIが一新：合理化された直感的なユーザーエクスペリエンス
AIが産業を再構築し続ける中、エンタープライズレベルのGenAIアプリケーションをサポートできるベクトルデータベースのような強力でスケーラブルなテクノロジーへの需要が急増している。開発者は、堅牢なだけでなく直感的で、不必要な複雑さを伴わずにAIアプリケーションを迅速に構築・保守できるツールを必要としている。
これを念頭に置いて、私たちはZilliz Cloudの最新リリースを導入しました。このリリースには、マルチレプリカ、データ移行、改良されたCardinalベクトル検索エンジンなど、エンタープライズ対応の多数の機能と機能強化が詰め込まれており、パフォーマンスが10倍向上しています。さらに、完全に再設計されたユーザー・インターフェイス（UI）を展開しました。この新しいUIは、よりクリーンで、より直感的で、ワークフローを合理化し、認知的負荷を軽減し、生産性を高めるために特別に設計されています。これにより、開発者は複雑な作業に煩わされることなく、技術革新に集中することができます。
このブログでは、UIオーバーホールの動機を探り、私たちが行った変更を紹介し、この新しいインターフェイスが開発者の作業をより効率的にする方法について説明します。また、SaaS製品のUIを再設計した経験から得た洞察を共有し、自身のプロジェクトでユーザーとのインタラクションを改善したいと考えているプロダクトデザイナーへの指針を提供します。
Zilliz Cloudの新しいUIをビデオでご覧ください。
ビジョンの再調整：UI再設計の原動力
2022年にZilliz Cloudに着手して以来、私たちは急速に進化し、ほぼ毎月新バージョンを発表し、ユーザーのペインポイントに対処し、具体的なメリットを提供し、より大きな成功を達成するために機能を拡張してきました。当初、私たちは野心的なユーザー・エクスペリエンスの目標を設定しましたが、機能リリースのペースが速いため、それが後回しにされることもしばしばありました。これは技術系企業でよくある課題です。継続的に提供しなければならないというプレッシャーが、基本的なUX目標を覆い隠してしまうことがあるのです。
最適化タスクで埋め尽くされた私たちのJiraバックログは、大幅な休止と再評価の必要性を浮き彫りにしました。ベクターデータベース市場の競争が激化する中、優れたユーザーエクスペリエンスを維持することは、ユーザーの満足度を高め、競争で優位に立つために非常に重要です。
この認識から、包括的なUIの再設計に着手することを決定しました。この大幅なアップデートは、単に美しさを向上させるだけでなく、機能性、モジュール、そして全体的な使いやすさを見直し、直感的でパワフルなプラットフォームとなるよう努めました。私たちは、機能的で使うのが楽しくなるようなツールを開発者に提供することを目指しています。
包括的なUI/UX監査による問題の特定
ユーザーエクスペリエンスを向上させる取り組みの一環として、インターフェイス内のすべてのコンポーネント、フォーム、ワークフローを詳細にレビューする包括的なUI/UX監査を実施しました。このプロセスにより、重要なペインポイントや改善が必要な領域を文書化し、再設計の取り組みに対する全体的なアプローチを確保することができました。
この監査では、多くのユーザビリティの問題が、柔軟性に欠け、現在のウェブデザインのトレンドに遅れをとっている、時代遅れのコンポーネントライブラリに起因していることがわかりました。
これらの矛盾に真っ向から立ち向かい、デザインチームはコンポーネントを刷新する必要性を強く感じました。既存のスタイルと、これらのモダンで合理的なデザインとのコントラストは際立っており、大幅なアップデートの必要性を強調していました。古いライブラリにパッチを当てても、さらに複雑になるだけだと認識した私たちは、UIコンポーネント・ライブラリを一から設計し直すことにしました。この戦略的な動きは、トレンドに対応し、デザインチームとフロントエンドチームがより効率的にインターフェイスを更新できるようにすることで、最終的にユーザーに共感され、全体的なエクスペリエンスを向上させる、より良い製品につなげることを目的としています。
より良いユーザー体験のために、合理的で開発者に優しいUIデザインを展開する
UIの再設計を決定した原動力と、私たちが遭遇した問題を特定したところで、私たちが何を変更したか、そしてこれらの変更がどのようにユーザーの役に立つかを見てみましょう。
シンプルでわかりやすいナビゲーション
以前のナビゲーションシステムは、プロジェクトレベルの機能を表示するサイドバーと、組織的なタスクを表示するトップメニューに分かれており、いくつかの重要な課題がありました：
ユーザーは、組織レベルのタスクとプロジェクトレベルのタスクを区別するのに苦労していました。
左上には、アクセス頻度の異なる要素が乱雑に配置されており、不必要なノイズが発生していました。
一部のインターフェース要素には機能性が欠けており、クリーンで効率的なデザインを維持するという目標に反していました。
以下は、UI再設計前後のナビゲーションシステムの比較です。上記の課題に対処するため、私たちはナビゲーションを完全に再構築しました。これには、視覚的なノイズを減らすために左上隅を断捨離し、機能的でない要素を削除することで、よりすっきりとしたインターフェイスを実現しました。
UI再設計前後のナビゲーションシステムの比較.png
これらの問題の解決に加え、私たちはさらなる改善を導入しました：
カテゴリ分けされた機能:** プロジェクトレベルの機能は、現在、論理的なカテゴリにグループ化されており、ツールや情報をより迅速かつ簡単に見つけることができます。
サイドバーのわかりやすさの向上:** サイドバーのアイコンを再設計し、よりすっきりとした直感的な外観を提供し、ナビゲーションの摩擦を軽減します。
新しいシステムは、より整理され、合理化され、直感的で、より明確で効率的なユーザーエクスペリエンスを提供します。
モダンなカードベースのデザイン
ユーザーからのフィードバックにより、以前のデザインにおける2つの大きな問題点が明らかになりました。それは、ユーザーを圧倒するようなぎっしりと詰まった表と、特に大きな画面でまばらに感じる空白のページです。これらの両極端に取り組むため、新しいUIではカードベースのデザインを導入しました。このアプローチは、情報密度とシンプルさのバランスを完璧に保ち、コンテンツを構造化された視覚的に明確なカードに整理します。
各カードは、ボタンやリンクなどの直感的な要素を備えた自己完結型のブロックとして機能します。これにより、インタラクションが簡素化され、必要なアクションが見つけやすく、実行しやすくなります。情報を論理的にグループ化することで、カードは複雑なデータセットをスキャン可能で整然とした単位に変え、視覚的な乱雑さを減らし、ユーザビリティを向上させます。
その結果、視覚的に魅力的であると同時に機能的なUIが完成し、開発者は気が散ることなく仕事に集中できるようになりました。
モダンなカードベースのデザイン](https://assets.zilliz.com/A_Modern_Card_Based_Design_3674cff5a7.png)
グリッドベースの一貫性でより明瞭に
新しいUIに構造と調和をもたらすため、すべての要素を正確に整理する厳格なグリッドシステムを導入しました。このアプローチにより、水平方向と垂直方向の完璧な整列が保証され、クリーンで洗練された直感的なレイアウトが実現しました。視覚的に一貫した基盤を作ることで、グリッドは認知的負荷を軽減し、ユーザーが楽に情報を処理できるようにします。
ユーザーエクスペリエンスの向上だけでなく、このグリッドシステムはチームのデザインプロセスを効率化します。 機能ページ全体で一貫性のあるレイアウトは、デザイナーやフロントエンド開発者が新しいページを作成したり機能を追加したりする際に、より予測しやすく効率的に作業できることを意味します。コンポーネントは、柔軟な組み合わせが可能なように慎重にサイズ調整されているため、インターフェイスの一貫性が保たれ、さまざまなシナリオに適応できます。
このような整合性と構造へのこだわりは、プラットフォームのルック＆フィールを洗練させるだけでなく、スケーラビリティもサポートします。開発者は不整合に気を取られることなく機能構築に集中でき、ユーザーは機能的で視覚的に調和のとれたUIを楽しむことができます。
グリッドベースの一貫性でより明瞭に](https://assets.zilliz.com/Greater_Clarity_with_Grid_Based_Consistency_ccaa10672c.png)
より直感的なインターフェイス
私たちの製品が成長し、進化するにつれ、速いペースの開発では、厳しい納期に間に合わせるために、使い慣れたデザインパターンを再利用することが多くなりました。このアプローチはプラットフォーム全体の一貫性を確保する一方で、ユーザーの直感を犠牲にすることもありました。まとまっているように見えるページが、必ずしも自然にナビゲートできるとは限らず、一貫性だけでは十分ではないという重要な洞察が明らかになりました。真のユーザビリティには、一貫性と適応性のバランスを取り、ユーザー体験を優先したデザインに仕上げることが必要です。
私たちは、インターフェイスをより直感的にするために、情報をより柔軟に整理するアプローチにシフトしました。たとえば、さまざまなオブジェクトのタイプに合わせてテーブルのデザインを改良し、各テーブルが表示するデータをより適切に反映するようにしました。同様に、密集した情報をカード・ベースのレイアウトに再構築し、より明確なコンテキストと行動しやすい要素を提供しました。
画一的なアプローチから脱却し、柔軟でユーザー重視のインターフェイスを作成することで、開発者がよりスムーズで直感的なエクスペリエンスを楽しみながら、より効率的にタスクをナビゲートできるようにしています。
より直感的なインターフェイス](https://assets.zilliz.com/A_More_Intuitive_Interface_318ac31674.png)
リデザインの基盤合理的でスケーラブルなUIライブラリ
私たちのUI再設計の成功は、合理的でスケーラブルなUIライブラリの作成なしにはあり得ませんでした。アトミック・デザイン理論_に基づいたこのライブラリは、色、フォント、シャドウ、コンポーネントといったデザインの核となる要素を、多様なユースケースに適応しながらもプラットフォーム全体の一貫性を確保する、まとまりのあるシステムに再構築しています。
合理的でスケーラブルなUIライブラリ](https://assets.zilliz.com/A_Streamlined_and_Scalable_UI_Library_3baaba6e6a.png)
この新しいUIライブラリは、ユーザーと社内チームの両方が、孤立した部分としてではなく、統一された全体として製品を操作することを理解して構築されました。全体的なルック＆フィールを洗練させ、すべてのインターフェイスにわたってシームレスな統合を確保するためにコンポーネントを再構築することで、私たちは再設計の課題に対処し、より直感的で効率的な、将来性のある製品のためのステージを設定するシステムを作成しました。
以下に、私たちのアプローチの背景にある重要な戦略とベストプラクティスを概説します。
カラーパレットを一新してモダンな印象に
UIを最適化する最初のステップは、よりモダンでダイナミックな美しさを反映するためにカラーパレットを一新することでした。ユーザーからのフィードバックによると、以前のデザインは古く感じられたため、くすんだ色合いの代わりに、より明るく、技術にインスパイアされたブルーを導入しました。他の色の明度と値を調整することで、ダークカラーやグレーへの依存を減らしつつ、よりフレッシュで若々しいトーンを加えました。
ミニマルでバランスの取れた外観を実現するために、黒と白を基調色として優先し、コントラストと調和のために慎重にコントロールされた比率を用いました。重いコントラストは、微妙な輪郭と影で和らげられ、構成要素が軽やかに見えるようになった。これらの更新により、洗練された現代的な雰囲気がインターフェイスにもたらされ、今日のデザイン基準に合致し、視覚的な魅力が高まりました。
モダンなカラーパレットに一新](https://assets.zilliz.com/Refreshing_the_Color_Palette_for_a_Modern_Look_7e8f5eb053.png)
ネガティブスペースの思慮深い使用によるユーザビリティの向上
ネガティブスペース（余白）を効果的に使うことは、ごちゃごちゃした印象を減らし、より快適で使いやすいインターフェイスを作るために不可欠です。私たちのリデザインでは、読みやすさと使いやすさを向上させるために、コンポーネント全体にゆとりのあるパディングを取り入れました。例えば、ボタンには最小幅が設定され、「編集」や「保存」のような短いラベルは、テキストの長さに関係なく、視覚的なバランスが保たれ、簡単に操作できるようになっています。
このように意図的にネガティブスペースを使用することで、インターフェイスがすっきりとし、視覚的に魅力的で直感的に操作できるようになりました。また、アイコンをよりスリムでエレガントなデザインにすることで、他の要素と組み合わせたときの軽快感を高めています。
ネガティブスペースの活用でユーザビリティを向上】(https://assets.zilliz.com/Enhancing_Usability_with_Thoughtful_Use_of_Negative_Space_d3a58e3f7a.png)
シンプルであること："レス・イズ・モア"
シンプルさは単なるデザインの好みではなく、意図的な戦略です。私たちの新しいUIでは、合理的で集中的なデザインシステムを構築するために、抑制の原則を取り入れました。アイコンとロゴは単一のサイズに標準化され、異なるコンテクストで動的に拡大縮小されます。この "less is more "の哲学により、不必要な複雑さを加えることなく、まとまりのあるエレガントなデザインを提供することができるのです。
また、カラーパレットを必要な色調に絞り込み、明暗のシャドウのみを使用し、テキスト階層を4段階に制限することで、システムをシンプルにしています。このような意図的な制約を設けることで、視覚的な乱雑さを抑え、インターフェイスのメンテナンスを容易にし、デザイナーの生産性を高めると同時に、クリーンで楽しいユーザー体験を提供しています。
シンプリシティを受け入れる - Less is More](https://assets.zilliz.com/Embracing_Simplicity_Less_is_More_d950c79af8.png)
よりスマートで直感的なフォームのためのコンポーネントの調整
デザインにおいて、私たちは "形は機能に従う "という原則に従っています。UIライブラリのすべてのコンポーネントは、明確な目的を持った役割を持たなければなりません。これは、データベース製品の多様なユーザー入力とシナリオをサポートできるコンポーネントを設計することを意味します。例えば、あらゆるSaaSプラットフォームの中核的な要素として、フォームは不可欠です。フォームでは、ユーザーが支払いの詳細、セキュアコード、リンク、パスワードなどを入力するような重要なタスクを処理します。
私たちは、さまざまな要件にシームレスに適応するように設計された可変入力コンポーネントを導入し、わかりやすさと使いやすさを向上させました。これらの入力フィールドは直感的で視覚的にわかりやすく、ユーザーが迅速かつ正確にタスクを完了できるよう支援します。機能性とユーザー効率を優先させることで、最も複雑なワークフローでさえもスムーズに感じられるようにし、摩擦を減らして全体的なエクスペリエンスを楽に保てるようにしました。
よりスマートで直感的なフォームのためのコンポーネントの調整](https://assets.zilliz.com/Tailoring_Components_for_Smarter_More_Intuitive_Forms_9349fad9ab.png)
さらに、コスト関連のアップデートに特化した特別なタイプのアラートを追加し、通常のシステム通知と区別しやすくしました。これにより、ユーザーは、料金、請求、使用に関する重要なアラートを、通常のメッセージと混同することなく、すぐに認識することができます。
よりスマートで直感的なフォームのためのコンポーネントの調整2](https://assets.zilliz.com/Tailoring_Components_for_Smarter_More_Intuitive_Forms_2_e41f33ccf5.png)
明確で一貫性のあるデザインガイドラインの定義
優れたコンポーネント・ライブラリは、単にスタイルの不統一を修正するだけではありません。以前は、コンポーネントの使用ガイドラインが不明確だったため、デザインレビューや開発時に混乱や摩擦が生じることがよくありました。私たちは、このような課題を克服するために、曖昧さをなくし、技術的負債を解決し、不必要なやりとりを減らす、明確で実用的なルールを導入しました。これらのルールにより、チームは細部の議論に費やす時間を減らし、より多くの時間を有意義なタスクに集中させることができるようになり、その結果、一貫性のある効率的な設計成果物を生み出すことができるようになりました。
以下は、私たちが確立した主なルールです：
ボタンの幅： **すべてのボタンには、ラベルの長さに関係なく、ユーザビリティとクリックのしやすさを維持するための最小幅が設定されました。
プライマリボタンとセカンダリボタン： **プライマリボタンは、たとえセカンダリボタンの方がテキストが長くても、常にセカンダリボタンと同じ幅にし、視覚的なバランスを保ちます。
フォーム・インジケータとヒント： **必須フィールド・インジケータとフォーム・ヒントは、厳密な配置規則に従い、フォームをより直感的でアクセスしやすくします。
モーダルウィンドウのサイズ調整：**モーダルウィンドウの幅は、4つの定義済み幅に制限され、視覚的な一貫性を保ちながら、デザイナーに柔軟性を与えます。
これらのガイドラインは、効率性だけではありません。ユーザーにとって自然で直感的に感じられる、洗練されたまとまりのあるエクスペリエンスを実現するための基礎となるものです。
このリデザインを可能にしたもの
チームの連携：ビジョンの共有
プラットフォームの再設計は小さな仕事ではありません。複雑で大規模な取り組みであるため、デザイナーや開発者は圧倒されそうになります。この複雑さを乗り切るために、私たちが最優先したのはチームの足並みを揃えることでした。明確なビジョンからスタートすることは非常に重要ですが、目的地に向かって足並みを揃えることはさらに重要です。当初から、私たちは個々の思い込みや個人的な好みから離れ、慎重かつ協力的なアプローチを採用しました。デザインの決定事項はすべて、それがユーザー・エクスペリエンスの目標にかなうかどうか慎重に評価され、すべての修正は、それが製品に意味のある付加価値を与えるかどうか確認されました。このように焦点を共有することで、チームは結束し、プロセス全体を通して軌道に乗ることができました。
アジャイルステップとスマートなタスク管理
大規模な再設計と継続的な機能開発のバランスを取るには、戦略的かつアジャイルなワークフローが必要でした。私たちはプロジェクトを管理しやすいフェーズに分け、明確なコミュニケーションと効率的なタスク管理を優先し、通常の製品イテレーションを中断することなく進捗を確保しました。
アジャイルなステップとスマートなタスク管理](https://assets.zilliz.com/Agile_Steps_and_Smart_Task_Management_c932ef091e.png)
1つの極めて重要な瞬間は、アジャイルUI実装レビューで、私たちは1日かけて、新しく実装されたUIが元のデザインプランとどれだけ一致しているかを注意深くチェックしました。このレビューでは、300以上の矛盾点が特定され、LarkのSmartsheetに文書化しました。各問題には、「未解決」、「解決済み」、「検証中」、「検証済み」といった実行可能なステータスがタグ付けされ、特定のチームメンバーに割り当てられました。この構造化されたプロセスにより、1週間以内にすべての問題を解決して検証することができ、新しいUIが当社の品質と一貫性の基準を満たしていることを確認できました。
ベストから学ぶ：データベースを超えるSaaSデザイン
従来のデータベース製品は、ユーザーを圧倒する複雑な機能セットによって重くのしかかり、ユーザビリティで苦労することがよくありました。私たちのリデザインでは、データベース特有のUI/UXの慣習にとらわれないことを目指しました。競合他社に視点を限定するのではなく、現代のSaaSデザインに見られるベストプラクティスを取り入れるため、アプローチの幅を広げました。
ベストから学ぶ-データベースを超えるSaaSデザイン](https://assets.zilliz.com/Learning_from_the_Best_Saa_S_Design_Beyond_Databases_23bb43b099.png)
私たちの調査はデータベース業界を超え、データ処理、クラウドサービス、AIアプリケーション、その他の主要なSaaSプラットフォームなどの分野のインターフェイスを調査しました。この幅広い視点は、業界を超えて機能する革新的なソリューションや共通のパターンについて、私たちに貴重な洞察を与えてくれました。
最後に一言
この再設計は、デザイナー、エンジニア、その他多くのチーム間の緊密なコラボレーションによって実現した、真のチームワークによるものです。彼らの努力、創造性、献身はZilliz Cloudの体験を全く新しいレベルに引き上げました。各チームメンバーがこのプロジェクトにもたらした情熱とコミットメントに心から感謝しています。
私たちの使命はここで終わりません。私たちはZilliz Cloudを継続的に改良し、ユーザーのニーズに応え続けることを約束します。ぜひ、アップデートされたUIをご覧いただき、改善点を直接体験してください。皆様からのフィードバックやご提案は、私たちにとってかけがえのないものです。一緒にZilliz Cloudをより良いものにしていきましょう！
Zilliz Cloudのすべての新機能と機能強化で無料で始める！
無料トライアル（クレジットカード不要）、または30日間エンタープライズトライアル（最大200ドル）をお試しください。
どのクラウドマーケットプレイスからでもご契約いただけます。
Zilliz Cloudの詳細については、 ドキュメントをご覧ください。
続きを読む
Zilliz Cloudの新機能：10倍のパフォーマンス向上とエンタープライズ機能の強化](https://zilliz.com/blog/zilliz-nov-24-launch)
ベクターデータベースとは何か？
RAGとは](https://zilliz.com/learn/Retrieval-Augmented-Generation)
ジェネレーティブAIリソースハブ｜Zilliz](https://zilliz.com/learn/generative-ai)
Koko LvDesign Lead at Zilliz
読み続けて
Zilliz Cloud BYOC Upgrades: Bring Enterprise-Grade Security, Networking Isolation, and More
Discover how Zilliz Cloud BYOC brings enterprise-grade security, networking isolation, and infrastructure automation to vector database deployments in AWS
AI Video Editing Software: Revolutionizing Video Tech Through Intelligent Search and Automation
Learn how to build AI-powered video editing tools using CLIP, ResNet, and vector databases. Discover implementation steps for intelligent search, automated tagging, and scalable video processing.
Mixture-of-Agents (MoA): How Collective Intelligence Elevates LLM Performance
Mixture-of-Agents (MoA) is a framework where multiple specialized LLMs, or "agents," collaborate to solve tasks by leveraging their unique strengths.