Mackerelチームでデザイナーをしている
id:takuwologです。
この記事ではMackerelがどのように情報をデザインしているのかを事例を交えて紹介します。
Mackerelとはエンジニアがサーバーを管理・監視するためのサービスです。 mackerel.io
サーバーの管理・監視を行なうMackerelでは多くの情報を取り扱うことになります。扱う情報は大きく分けると3つあります。
- サーバーの仕様や状態などの情報
- サーバーを監視するためにユーザーが追加した設定情報
- チームやユーザー個人の設定情報
上記3つを合わせると情報量はとても多くなります。そのため情報を「わかりやすく」ユーザーに提示することがサービスにおいて重要になってきます。
「わかりやすさ」とは何か
ユーザーは日常的にMackerelを使用してサーバーの管理・監視を行います。そのため誰がどんな時に何が目的でMackerelを使用するのか（ユースケース）を明確にすることが非常に大切になります。大量の情報の中からユーザーが必要な情報に素早くアクセスするために、デザイナーはユーザーのユースケースを理解し、それにそったかたちで情報をデザインし提示することが「わかりやすさ」につながっていくと考えています。
情報の構成
多くの情報をわかりやすく提示した例として、Mackerelの代表的な画面の1つであるホスト一覧画面を紹介します。
この画面はホストをリスト形式で一覧表示しています。ユースケースはホストを管理するための管理台帳として使用するほかに、異常があるホストを見つけるといった事が挙げられます。これらの行為をスムーズに行なえるために視線を上下に移動させながら素早く情報を取得できる、リスト形式を採用しています。またその他には、詳細な情報を見たいホストの詳細画面に素早くアクセスすることや、ホストをロール1に紐付けることにも使用されます。
これらのユースケースを満たすため、大きくわけて3つの要素で情報を構成しています。
ステータス
1つ目はステータスで、ホスト一覧画面でホストの状態を色で識別できるようにしています。例えばホストを監視中で尚かつ通知2される状態なら青でWorking。さらにその横の丸いオブジェクトはアラートに関する情報で、緑なら正常、赤ならホストに異常があることを表します。
その結果ホストの状態をスムーズに把握することができ、異常があるホストがあれば瞬時に見分けることが可能だと考えています。また監視サービスであるMackerelではステータスが非常に重要な情報であるため、最初に目に入るようにリストの先頭に表示しています。
項目に関する情報
2つ目はホストの名前やCPU、追加日などのホストに関する情報です。
項目に関する情報は一覧画面に収まる情報量でユーザーが何が見たいかを考える必要があります。一例としては「詳細情報の導線」と考えることができそうです。導線として必要な情報を一覧で確認できれば良いので、自ずと表示する情報は絞られてきそうです。端的に言えばホストを識別できる情報があれば良いことになります。
もちろん基準はそれだけではありませんが、何を表示するかを考える手がかりにはなるかと思います。またそれぞれの情報は関係性を考慮して表示する順序やフォントの大きさなどを決めています。
操作
3つ目は操作で、ユースケースでも述べたようにホストをロールに追加・編集することができます。
操作のためのインターフェースはサービス内で形状や振る舞いが統一されており、異なるページでも繰り返し使用されています。それによりユーザーに学習を強いることなく、スムーズに操作してもらうことが可能です。
まとめ
上記のようにユーザーがどんな時に何が目的で何を行なうのかを考えることで、多くの情報を扱う場合でも「わかりやすく」デザインすることができるかと思います。情報量が増えてくると画面が情報過多になりがちですが、そんな時は一度立ち止まってユースケースを洗い出し、本当に必要な情報は何か、どう見せると良いかを再度考えてみることが大切だと思います。
ITインフラストラクチャの変化にともなって、Mackerelで扱う情報は今後もますます増えていくことが予想されます。そういった状況でもMackerelがユーザーにとって「わかりやすい」サービスであり続けるために、デザイナーはユーザーに寄り添ったデザインを行っていきたいです。
