🕴️

【カイゼン】グルーピングの自由度とユーザビリティへの対応

目次

グループ機能がアップデート

タグによる管理の自由度がアップ

一覧画面はこれまで、ツアー, ヒント, ポップアップの3種のみでグループされていました。

これはOnboarding独自の用語を前提としており、しっかり理解するまでに長い時間を要します。また管理方法の幅も大きく制限されていました。

例えば用途で分けたりページで分けたいと思っていても、それは不可能でした。

そこで今回、より自由な空間を求め、施策に任意のタグを付与できるようにアップデート。これまでよりも自由な表示や管理が可能になりました。

独自のタグを使ったグループ例。これまでと全く違う管理が可能に。
独自のタグを使ったグループ例。これまでと全く違う管理が可能に。

また、作成者ごとのグルーピングや、グループを解除することも可能になりました。

特に施策の数が少ない状態ではグループが無い方が一覧性が高まります。最初はグループを外してみてもよいでしょう。

一度グループを外した後、施策の数が10個を超えるようになったら再度グループを使用するのがオススメです。

グルーピングをタグから作成者に変更する様子
グルーピングをタグから作成者に変更する様子
グルーピングの解除導線
グルーピングの解除導線

詳細画面が追加

ユーザビリティ

編集画面と一体であることの問題

施策について何かのアクションを起こす際、これまではほぼ全ての要素が編集画面に格納されていました。

すべての項目が1つのページにまとまっていることは、一見良いことのように思えるかもしれません。

しかしあまりに多くのものを格納していたために、その格納方法はUIとしても機能としても複雑になっていました。

例えば規定の操作を順番通りにこなさないとタスクを完了できなかったり、何がどこにあるのか覚えるのに時間がかかったり、あるいは弊社のカスタマーサクセスから案内されなければ気づかない機能や要素があったりと、複数のユーザビリティとアクセシビリティの問題を孕んでいました。

解消のための一歩

そこで問題解消の第一歩として、一部の構成要素を編集画面から切り出しました。そしてその切り出したものを格納する場所として詳細画面を新しく追加しています。

新たに追加された詳細画面(矢印は遷移)
新たに追加された詳細画面(矢印は遷移)

この切り出しは「”施策”とは何なのか」を再定義した上で、その構成要素(プロパティ)としてふさわしいものだけを慎重に選別して行いました。

現時点では編集画面に残さざるを得なかった要素もいくつか存在し、今後の改修でそれらも詳細画面へ移動する予定です。

施策という”モノ”を可視化するため設計されたプロパティ表の一部
施策という”モノ”を可視化するため設計されたプロパティ表の一部

管理や把握のハブ

利用数のサマリーにすぐにアクセス

テックタッチなオンボーディング施策において最も基本的な指標は、ズバリどのくらいの人が利用したのか、です。

度重なるユーザビリティテストの結果、詳細画面にはこの利用数という指標が他のどの指標よりも必要とされていることが分かりました。

…いえ、正しくは、この指標だけが必要とされていました。他の数値は細かすぎて、ユーザーにとってあまり参考にならなかったのです。

開発中途のUI。この時点では、多くの指標・数値が並ぶ。テストで情報過多と判明しボツに。
開発中途のUI。この時点では、多くの指標・数値が並ぶ。テストで情報過多と判明しボツに。

また、利用数は基本的な指標であるだけに、その程度の確認のためにレポート画面を開き何度もクリックやスクロールすることを面倒に感じるインサイトも見つかりました。

最も基本的な指標を見ることに面倒さを感じることは、ユーザーにとって機会損失となり得ます。

そこで、詳細画面には利用数の簡易チップを新設。これにより、レポートを見るよりも素早く手軽に利用数にアクセスできます。

レポートを見る面倒さから各施策の利用数がよく分かっていない, 改善すべき施策を素早くキャッチアップできない、という状態が少なくなるでしょう。

利用数を示す簡易チップ(左下)
利用数を示す簡易チップ(左下)

タグの追加

詳細画面のタグ欄では、任意をテキストのタグを追加できます。

このタグは一覧でも表示され、判別しやすくするとともに、グルーピングにも活用することができます(先述)。

詳細画面のタグ欄。任意のタグを作成・指定できる
詳細画面のタグ欄。任意のタグを作成・指定できる

詳細やプレビューのタスク速度

遠くなった?

これまでは施策をクリックすると編集画面へ直接遷移していたため、これに慣れたユーザーにとっては編集画面が「遠くなった」感じがするかもしれません。

プレビューについても同じくでしょう。

一覧編集画面プレビューと2回のクリックだったところが、一覧詳細編集画面プレビューと3回のクリックが必要になっています。

このクリック数増加に対しては、それを辿る必要のないショートカットを用意しています。

ショートカットとしてのメニュー

用意したショートカットは、メニューからの操作です。メニューは右クリックで呼び出します。

メニューからであれば、編集にもプレビューにも直接移動できます。

右クリックで呼び出すメニュー
右クリックで呼び出すメニュー

下記表のように、編集画面への遷移のための時間は右クリックする時間のみの変化であり従来と遜色ありません。

プレビューについてはクリック数こそ2回のままですが、間に編集画面への遷移が挟まらないことで、その分むしろ所要時間が短縮されています。

編集画面を開く
遷移
必要クリック数
所要時間
一覧→編集画面
1
3〜4秒
一覧→メニュー→編集画面
2
4〜5秒
プレビューを開く
遷移
必要クリック数
所要時間
一覧→編集画面→プレビュー
2
9〜10秒
一覧→メニュー→プレビュー
2
3〜4秒

「コレ今どういうステータス?」を解消する

メモ機能

今回、詳細画面には施策についてのメモを記述できる欄を新機能として追加しました。この機能は、実はユーザーの実際の使い方を参考に開発された機能です。

ユーザーの行動を参考に

ある時私たちは、特定のユーザーが施策の中にステータスを記述していることを発見します。

施策の中にステータスが直接書かれていた(再現)
施策の中にステータスが直接書かれていた(再現)

これまで、”ある施策が今どのような状態にあるのか” は、その施策を作った本人に聞かなければ分かりませんでした。このコミュニケーション摩擦を下げるために彼らはステータスを直接記述していたのです。

私たちはこの問題に対して、彼らの運用方法を公式にフォローすることにしました。それが詳細画面に追加されたメモ機能です。

このメモに現在の状況や予定, 経緯を記述することで、作成者以外にも意図を伝達することが出来ます。

目立たない機能ですが、コラボレーションの問題を改善し「この施策いまどういうステータス?」と質問したり回答する手間を代替してくれるでしょう。

メモ欄にステータスを記述した様子のデモ(ハイライト部分)
メモ欄にステータスを記述した様子のデモ(ハイライト部分)

調整された文字数

メモ欄の文字数は150文字に制限されています。

実はこの文字数制限は、初期案では500文字でした。しかしその後、実際のユーザーの行動と発話からより短い方が複数の意味でバランスがよいことが発見され、より短い文字数制限となりました。

メモの編集ダイアログ。150文字に制限されている
メモの編集ダイアログ。150文字に制限されている

Credit

  • Design
    • UI Design, UX Research:Yuki Yoshinaga
  • Dev
    • FrontEnd:Taiga Ebihara, Taiki Bun
    • BackEnd:Tomohiro Suzuki