ネットワーク管理画面を刷新し、情報階層を明確にして日常の操作をスムーズに

(課題)

機能が増え続け、管理画面にはより分かりやすいナビゲーション構造が必要になった

このプラットフォームは、複数のグループ企業の公式サイトについて、トラフィックとセキュリティの状態を監視しています。顧客数とともに機能が増え、新機能はプルダウン式のサイドバーに追加され続けたため、エンジニアは目的の機能を探してメニューを下へスクロールする必要がありました。

探している機能がどの項目に属するのか、ユーザーが判断しにくい場面がありました。緊急事態を素早く解消しなければならないエンジニアにとって、探す時間を短縮することが最優先の目標です。

プリセールス担当、プロダクトマネージャー、技術担当、フロントエンド・バックエンドのエンジニアは、それぞれプラットフォームに異なる期待を持っています。チームは約2か月をかけて複数回のインタビューを行い、使用上の困りごとを記録し、分類・優先順位付けをしてプロジェクトの目標を定め、クライアントが提携企業向けに用意したプラットフォームの操作マニュアルも参考にしました。

(アプローチ)

主要ページを先に設計し、そこからルールを整理

プラットフォームは技術的なハードルが高く、複数の操作シーンとレスポンシブデザインを同時に考慮する必要があります。要件が複雑でコンポーネントも多様なため、まず利用頻度が最も高い主要ページを設計し、完成後に主要ページ間の共通ロジックを見つけて整理し、そのデザインルールを残りの補助ページに適用する進め方に切り替えました。

コンポーネントは、企画、設計、レビュー、調整、テスト、確認を経て、10回を超える反復を重ね、汎用性の高いコンポーネントセットとして完成しました。

(設計の要点)

三つの設計ポイント

横方向パネル

新版では、同種の機能をグループ化してブロックで区切り、メイン・サブのサイドバー、プルダウンメニュー、ブックマーク、ツリー図、多層のモーダルを組み合わせ、さらに左から右へ展開する横方向パネルを加えました。ユーザーは階層ごとに切り替えながら、素早く機能を見つけられます。

汎用コンポーネント

利用頻度が高くデータ量も膨大なページ、たとえばホスト一覧は、汎用性の高いテーブルコンポーネントとトポロジー図コンポーネントで構成しています。ホスト一覧では右クリックで、ホストごとに操作を一通り実行でき、機能の種類別に整理して並べています。

複雑な情報の可視化

プラットフォームのブランドカラーである緑を画面全体に通し、この色で正常な状態を示し、赤と黄色を異常として扱います。すべての色の階層は文字より低く抑え、要点を示しつつ目に刺さらないようにしています。トポロジー図、ホスト、トラフィックの状態は図で表現し、単色のグラデーションで識別を補助します。サイトの状態は20種類に分け、フォーム用のアイコンを200個近く設計し、MIS担当者が初動の重要な時間内にサイトの障害を素早く解消できるようにしました。

(成果)

半年で予定どおり完成し、セキュリティ展示会でお披露目

協業の初期段階で、クライアントはプロジェクト全体をセキュリティ展示会の前に完了させることを希望していました。半年をかけて予定どおり納品し、プラットフォームチームは展示会で多くの協業機会を得ました。

体験の改善は、リアルタイム監視、コンプライアンスの事前チェック、IPアドレスの割り当て、利用制限などの導線に及びます。