カスタムダッシュボードの活用方法とMackerel開発チームでの実践例

by taxin

Slide 1

Slide 1 text

Mackerel開発チームでのカスタムダッシュボードの活用例 id:taxintt / @taxin_tt 2023/10/25 Mackerel Drink Up #12 1

Slide 2

Slide 2 text

自己紹介 ● 西川拓志 ○ id: taxintt / @taxin_tt ● Mackerel開発チーム SRE 2

Slide 3

Slide 3 text

今日の話 ● カスタムダッシュボードについて ● ダッシュボード利用時の悩みどころ ● 開発チームにおけるダッシュボードの活用例 3

Slide 4

Slide 4 text

4 1. カスタムダッシュボードとは?

Slide 5

Slide 5 text

カスタムダッシュボードとは? ● ユーザーがwidgetを自由に配置してカスタマイズができるダッシュボード ○ アイコンをドラッグ&ドロップしてwidgetを配置 5

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

11 カスタムダッシュボード「上手く」使ってますか?

Slide 12

Slide 12 text

12 2. ダッシュボード利用時の悩みどころと開発チームの活用例

Slide 13

Slide 13 text

Slide 14

Slide 14 text

散見される悩み ● ダッシュボードに情報を詰め込みすぎて認知負荷が高くなる ● 情報量は増えたが結局何をみたらいいのかわからない ● widgetは置いてあるが、どう見たらいいのかわからない 14

Slide 15

Slide 15 text

散見される悩み ● ダッシュボードに情報を詰め込みすぎて認知負荷が高くなる ● 情報量は増えたが結局何をみたらいいのかわからない ● widgetは置いてあるが、どう見たらいいのかわからない 15

Slide 16

Slide 16 text

認知負荷とは ● ユーザーが情報を処理し、理解する際にかかる精神的なエネルギー量 ● 処理すべき情報がユーザーの処理能力を超えると認知負荷が高いと見なされる 16

Slide 17

Slide 17 text

「『短期記憶の負荷を減らしつつ、表示されたコンテンツの理解度を高めることを念頭において、人の理解を助けるためのインターフェイスの仕様に関する判断を行う』ことが認知負荷を軽減するデザインだと考えられます。」 17 https://blog.adobe.com/jp/publish/2020/11/16/cc-web-ux-6-ways-to-reduce-cognitive-load-for-a-better-ui

Slide 18

Slide 18 text

● 短期記憶の負荷を減らす ● 表示されたコンテンツの理解度を高めることを念頭に置く ● 人の理解を助けるためのインターフェイスの仕様に関する判断を行う 18 認知負荷を軽減するには

Slide 19

Slide 19 text

散見される悩み ● ダッシュボードに情報を詰め込みすぎて認知負荷が高くなる ● 情報量は増えたが結局何をみたらいいのかわからない ● widgetはあるが、どう見たらいいのかわからない 19

Slide 20

Slide 20 text

1. 情報量を減らす ● ダッシュボードを確認しアクションを起こす ○ e.g.) API latencyがある時点から悪化 → 原因調査 ● アクションに繋がらない情報は削る 20

Slide 21

Slide 21 text

e.g.) SLO用のダッシュボード ● SLO（サービスレベル目標） ○ サービスの信頼性の目標・評価基準を定めたもの e.g. HTTPリクエストのSuccess rate : 99.95% ● SLO運用 (SLOの更新) での利用を想定 ○ SLOの現在の状況が把握できる 21

Slide 22

Slide 22 text

Slide 23

Slide 23 text

1. 情報量を減らす ● ダッシュボードを確認しアクションを起こす ○ e.g.) API latencyがある時点から悪化 → 原因調査 ● アクションに繋がらない情報は削る ○ 情報整理のためには「ダッシュボードの利用目的」も重要になる 23

Slide 24

Slide 24 text

散見される悩み ● ダッシュボードに情報を詰め込みすぎて認知負荷が高くなる ● 情報量は増えたが結局何をみたらいいのかわからない ● widgetは置いてあるが、どう見たらいいのかわからない 24

Slide 25

Slide 25 text

2. 利用目的を整理する ● ダッシュボードを見た上でのゴールは何か ○ サービスの正常/非正常を判断すること? ○ 非正常な事象を調査・解消すること? ● ダッシュボードを見る場の目的も明確にする 25

Slide 26

Slide 26 text

26 ダッシュボードを見る場

Slide 27

Slide 27 text

PWG (Performance Working Group) 27 https://mackerel.io/ja/blog/entry/advent-calendar2015/day19

Slide 28

Slide 28 text

PWG (Performance Working Group) 28 https://qiita.com/heleeen/items/62f8b001310d49f42653

Slide 29

Slide 29 text

PWG (Performance Working Group) ● 背景 ○ システム運用の情報が一部に閉じがちで、開発チームのエンジニアが状況把握できてないという問題意識 ● 内容 ○ 開発チームのエンジニアとSREがパフォーマンス状況やインフラの構成変更を共有 29

Slide 30

Slide 30 text

PWG (Performance Working Group) ● 背景 ○ システム運用の情報が一部に閉じがちで、開発チームのエンジニアが状況把握できてないという問題意識 ● 内容 ○ 開発チームのエンジニアとSREがパフォーマンス状況やインフラの構成変更を共有 30

Slide 31

Slide 31 text

PWG (Performance Working Group) ● PWGとしてのゴール ○ 開発チーム全体でシステム運用の状況を把握できる (e.g. インフラ構成変更、パフォーマンス状況) 31

Slide 32

Slide 32 text

PWG (Performance Working Group) ● 状況を把握できる ○ パフォーマンス問題が見られたとしても、 PWGの場としては「問題が把握できればOK」 ○ 対応自体はissueを作成して原因調査を別途行う 32

Slide 33

Slide 33 text

PWG (Performance Working Group) ● 状況を把握できる ○ パフォーマンス問題が見られたとしても、 PWGの場としては「問題が把握できればOK」 → パフォーマンス状況を把握するための情報を　　　ダッシュボードに含める 33

Slide 34

Slide 34 text

34 https://mackerel.io/ja/blog/entry/meetup14-3

Slide 35

Slide 35 text

ダッシュボード(見る場)の目的が決まる → 目的を達成するのに必要な情報が整理される → ダッシュボードに含めるべき情報が決まる 35

Slide 36

Slide 36 text

(再掲) 1. 情報量を減らす ● ダッシュボードを確認しアクションを起こす ○ e.g.) API latencyがある時点から悪化 → 原因調査 ● アクションに繋がらない情報は削る ○ 情報整理のためには「ダッシュボードの利用目的」も重要になる 36

Slide 37

Slide 37 text

散見される悩み ● ダッシュボードに情報を詰め込みすぎて認知負荷が高くなる ● 情報量は増えたが結局何をみたらいいのかわからない ● widgetは置いてあるが、どう見たらいいのかわからない 37

Slide 38

Slide 38 text

3. Markdownウィジェットの活用 ● ダッシュボードの「見方」を補足する ○ メトリックの値が示す状態 ○ メトリックの変動が示す兆候 ○ メトリックを基に監視しているコンポーネントの振る舞い 38

Slide 39

Slide 39 text

39 https://mackerel.io/ja/blog/entry/meetup14-3

Slide 40

Slide 40 text

e.g.) PWG用のダッシュボード ● Markdownウィジェットや補助線機能の活用 ○ e.g.) latency = 500msを基準値とすると、それ以下の水準でlatencyが変動していても対応不要と判断できる 40

Slide 41

Slide 41 text

41 https://mackerel.io/ja/blog/entry/meetup14-3

Slide 42

Slide 42 text

まとめ ● ダッシュボードに含める情報は最小限に ● ダッシュボードや使う場のゴールを明確にして情報を整理する ● 整理した情報を理解できるようにする ○ e.g. Markdownウィジェット、補助線機能 etc… 42

Slide 43

Slide 43 text

43 カスタムダッシュボードを使う上での悩み・ノウハウ聞かせてください