Unknownの色を紫にした背景について

Mackerelでデザイナーをしている id:issan883です。 この記事は Mackerel Advent Calendar 2023 の4日目の記事です。

今回は以前告知していた、「一部アラートステータスの配色が変更となります」 の、対応の背景を解説したいと思います。

アラートステータスによってバッチやファビコンの色が変わる機能を開発しているときに、 「Unknownは意図した監視がおこなえていないことを示すアラートで、要確認の状態なのに、なぜ目立たないグレーなんだ?」と、疑問がでたところからでした。

例えば、org名を表示している画面左上のエリアですが、 orgのアイコンの上に現在出ているアラートの総数が表示されるようになっています。

旧ステータス

左右見比べたときにどちらの状態が危険な状態に見えますか? パッと見ると、右の赤のほうが危険だと思われるかたが多いと思います。 実際は灰色がUnknownなので左のほうが危険な状態です。 (※Unknownが発生する原因についての詳細はこちらをご参照ください)

灰色は、Unknown = 不明という状態を表すのには、ふさわしい色ですが、危険度を表す色としてはふさわしくありません。 そこで、目立ちつつ、状態に沿った色に変更しようということになりました。

参考にしたのは、内閣府が発表している避難情報に関するガイドラインです。 (詳細は内閣府のホームページをご参照ください)

危険レベル

図の通り、MackerelのCriticalとWarningは、この危険度のレベルと沿った内容になっていました。 UnknownはCriticalの上なので、紫にしようと、決まったわけです。

ただ問題があり、紫はCloseで使われていたので、 このまま、Closeで使っていた紫とUnknownで使っていた灰色を逆転させると、 混乱を招いてしまう可能性があるため、紫の彩度を調整したUnknown用の新しい紫を設定しました。

灰色に白抜きでUnknownと表示され、紫色に白抜きでClosed Manuallyと表示されている紫色に白抜きでUnknownと表示され、灰色に白抜きでClosed Manuallyと表示されている
変更前後のアラート一覧におけるUnknown/Closedステータス表示

このようにMackerelでは、ユーザーがわかりやすく、障害をいち早く察知してもらうため、 日々工夫をしておりますので、なにか要望がありましたらいつでもご相談ください。

Mackerel Advent Calendar 2023 、明日 5日目は id:mds_boy さんです。

[PR] Mackerel Meetup #15 Tokyoを2023年12月19日(火)に開催します

「チームとコミュニティで監視を育てる」をテーマに、監視を育てるスタート地点でもあり、考え方でもある「SRE」の概念やその導入方法、具体的な実装について知ることのできるコンテンツを用意しています。Mackerelをお使いの方も、これから使い始めようという方も、明日から自分たちの監視やシステムを育てるヒントにしていただけたら幸いです。ぜひMackerelチームメンバーに会いに来てください!

詳細とご応募はこちらから!

mackerelio.connpass.com