こんにちは。デザイナーの
id:takuwologです。去年の11月にカスタムダッシュボードをリニューアルし、直感的に作成・編集でき、グラフ以外の情報も表示できるようにしました。そこでこの記事ではカスタムダッシュボードリニューアルにおけるデザインアプローチをご紹介します。
視覚言語とユーザーテスト
カスタムダッシュボードリニューアルのデザインアプローチにおけるトピックは大きく分けて2つあります。
1つは視覚言語についてです。MackerelはUIが良いと言われますが、その理由の1つにMackerelの視覚言語が関係していると考えています。視覚言語の詳しい話は後述しますが、UIは視覚言語の組み合せで成り立つことが多いです。なので複数ある視覚言語を一定のルールのもと使用し、ユーザーに一貫した体験を提供することが「UIが良い」と言われる結果に繋がると思っています。カスタムダッシュボードのリニューアルでもこの視覚言語を意識してデザインしました。
またカスタムダッシュボードリニューアルにおいて、この機能をより良くできた要因としてユーザーテストが挙げられます。ユーザーテストについての詳しい内容も後述しますが、ユーザーテストの結果から質の高い機能にブラッシュアップするための重要なヒントが得られました。
以上2つのトピックを中心に振り返っていこうと思います。
Mackerelの視覚言語
ウェブサービスデザイン界隈では数年前からデザインシステムの話題をよく目にしますが、もちろんMackerelにもデザインシステムがあります。私がチームに参加した頃（約3年前）には既に存在していたので、長い間Mackerelを支えている強固なシステムの1つであり、Mackerelのデザインそのものと言えます。
この記事でデザインシステムではなく、わざわざ視覚言語としている理由は、私の認識ではデザインシステムを構成する要素として視覚言語があり、今回はそれについて書きたいからです。とは言え、視覚言語について大まかに定義しておくと、UIなどの要素を構成する最小単位の視覚的に意味を持ったスタイルを視覚言語と呼んでいます。
borderの意味
Mackerelには数種類の線があります。線ひとつひとつには意味があり、それがMackerelの画面を構成しています。例えばborder: 2px solid #cccはinputやtextareaといった、システムがユーザーからデータを受け取るためのフォームに使用しています。同じtextareaでもロールグラフのメモ機能はborder: 1px dashed #aaaです。このスタイルは要素をマウスホバーした時のもので、その場で編集できることを表しています。またborder: 1px solid #cccは構造整理のための線として使用しています（文脈によって#edeeefになったりと色が変わることがあります）。このように線だけでも複数の意味があり、視覚言語としてユーザーにその意味を伝えています。
上記でUIは視覚言語の組み合わせと書きましたが、例えばフォームに使用するborder: 2px solid #cccにプルダウンを示す（上下三角）を合わせればプルダウンメニュー（またはドロップダウンリスト・セレクトボックスとも言う）の見た目になります。あとは文言を付け加えれば良いですね。
視覚言語を一定のルールにそって使うことで、ユーザーがシステムとスムーズに対話できることを目指しています。
カスタムダッシュボードリニューアルにおける視覚言語
リニューアルされたカスタムダッシュボードの1番の特徴はウィジェットです。ウィジェットは情報を表示する箱で、ウィジェットコンテナ（ウィジェットを表示するエリア）のグリッドに沿って、自由に移動やリサイズすることができます。若干グラフボードに似ていますが、これまでにはなかったインタラクションです。なのでこれまでの視覚言語を意識しながらも、新しい言語を加える必要がありました。
ダッシュボードには編集画面と閲覧画面があり、それぞれでウィジェットの見た目を変更しています。まず編集画面のウィジェットは破線で囲っています。線のスタイルはメモ機能とほぼ同じですが、視覚言語としての役割は違います。ここでは編集できる要素という意味に加え、未確定の要素であることを表す視覚言語として用いています。そして閲覧画面では確定した要素として線で表しています。
また編集画面ではウィジェットの中身（情報）に触れないことをウィジェットを半透明にすることで伝えています。半透明にすることでグリッドが見えるので、ウィジェットの大きさを把握することにも一役買っています。もう少し透明度の話を掘り下げると、リサイズ時には大きさを意識できるようにウィジェットの透明度を上げて、反対にドラッグドロップで移動させる時はウィジェット同士が重なって見づらくなるのを避けるために透明度を下げています。
操作の予測がたてられるようにすることも大切です。例えばマウスホバー時にはborder: 1px solid #444; cursor: move;のように線の色とカーソルを変化させています。移動・リサイズではウィジェットに影のような装飾を施し、それが操作の結果どうなるかを表しています。
これらは特別なことではなく、多くはごく当たり前にやられていることだと思いますが、しっかりと配慮することでより良い体験に繋がると考えています。
ユーザーテストを取り入れた開発
カスタムダッシュボードリニューアルのミクロ的なデザインアプローチについて書きましたが、細部だけを突き詰めても良いデザインは完成しません。特に細かい部分に神経を集中させている時は周りが見えなくなるものです。幸いにもカスタムダッシュボードリニューアルではユーザーテストを行うことで、それに気づくことができました。
200週連続リリースを目処に毎週リリースが終わり、その結果じっくりと機能開発をすることが可能になりました。それを受けてカスタムダッシュボードリニューアルでは開発終盤にユーザーテストを実施しました。これは担当エンジニアの
id:susisuが移動・リサイズでのウィジェットの動きがユーザーのメンタルモデルと差異がないか確かめるために提案したことが発端です。人選はディレクターの
id:daiksyが、ユーザーテストの内容の取り決めとファシリテーションは私が行いました。
ユーザーテスト
以下の内容を社内の5人に実施しました。
- 2つのシナリオに基づいてそれぞれ操作してもらう - 1つは全てのウィジェットを使用して好きなようにカスタムダッシュボードを作ってもらう - 1つは既にあるカスタムダッシュボードを好きなように編集してもらう - 考えていることや、やろうとしていることを発話しながら操作してもらう - 既にあるカスタムダッシュボードの閲覧画面を眺めて感想・意見をもらう - カスタムダッシュボードについて思ったことや、今後欲しいウィジェットなどあれば意見をもらう
当初気にしていた移動・リサイズにおけるウィジェットの動きはそこまで問題にはならなかったのですが、面白いことに（面白がってはいけないのだけど）皆一様に同じところで苦労していました。中でも一番のボトルネックはウィジェットコンテナの狭さでした。テスト環境がMacBook Proだったこともありますが、一度に表示できる情報には限りがあります。しかしテスト当時はタイトル名やメモなどの要素が大きく、それらがウィジェットコンテナを圧迫しており（この時はウィジェットコンテナ上の全ての要素が固定されていました）移動・リサイズの操作で影響を受けるウィジェットが画面から見えなくなり、レイアウトがどうなったかがわからなくなっていました。これがあまりにも酷く、それ以外の課題が見えてこない恐れがあったので3人目から画面を70%ほどの大きさに縮小してテストしました。
またウィジェットコンテナが狭い以外にも、編集と閲覧でウィジェットの見た目に変化がなく、編集画面でもウィジェットの情報を触れると勘違いされるなどの課題が浮き彫りになりました。これらはユーザーテスト時に気になったこととしてスプレッドシートに記入していき、5人のテスト終了後にリリースまでに対応する課題として改善していきました。
ユーザーテストから見えた課題を改善した結果、圧倒的にユーザビリティが向上したと感じています。大型機能開発においてユーザーに近いメンバーであるCREをはじめ、様々な職種の方の意見を取り入れられたことは非常に有意義なことだったと考えています。このユーザーテストはじっくりと腰を据えて機能開発することに舵を切ったチームの取り組みが、しっかりと成果として現れたいい例だったと思います。
おわりに
実はカスタムダッシュボードを新しくしたいという話は2年以上前からありました。その時はグラフボード機能を作ることで、ある程度カスタムダッシュボードが抱えている問題を解決できると思っていました。そしてグラフボードがあったからこそ、ウィジェットを直感的に動かして操作するUIに挑戦できました。またカスタムダッシュボードリニューアルにおけるデザインは、これまでのMackerelのデザインを考えることでもありました。Mackerelの画面を構成する要素を細かく分解し定義することで咀嚼していきました。この作業はMackerelとともに、自分自身の成長にも繋がりました。
今後のカスタムダッシュボードはウィジェットを通してより多くの情報を扱えるようにしていきます。その中にはこれまで扱ってこなかった情報もあるかと思います（メトリックの数値は今回のリニューアルで表示できるようになりました）。新しい情報を扱う場合でも今まで築いてきたMackerelのデザインを大切にしつつ、これまで以上にユーザーに寄り添ったデザインを目指して開発していこうと思います。
