🕴️

【カイゼン】一覧の生産性がアップ

新しい施策一覧

今回のアップデートでは、”施策一覧” にたくさんの変更が行われました。

“ガイド” → “施策” へ

私たちはこれまで、ユーザーが作るオンボーディングの総称を”ガイド”という、特有の用語でご案内してきました。

しかし、こういった用語はOnboardingの構造をスムーズに理解することを難しくしている一因です。

そこで一覧に並ぶ概念の名前を、”施策”へと変更。一般的な言葉になって認知負荷が下がり、スッと理解できるようになりました。

”施策一覧” へと生まれ変わった一覧では「ガイドって何のことだっけ?」といった風に思い出す必要はもうありません。

“ガイド”タブが“施策一覧”に。
“ガイド”タブが“施策一覧”に。

ヒントが見つけやすく

これまでは、任意のヒントを見つけるには、ヒントをクリックし、読み込み時間を待ち、コンテンツ欄をスクロールやクリックして回る必要があり、長い時間とストレスがかかっていました。

旧UIでヒントを見つけるまでに通る必要のあった手順。必ずこのように探す必要がある。
旧UIでヒントを見つけるまでに通る必要のあった手順。必ずこのように探す必要がある。

ヒントの数が多くなるほど特に管理が難しくなります。何がどこにあるかをスプレッドシートやエクセルに書いて管理しているユーザーもいるほどでした。

旧UI
発見までの 手順
セルをクリック  →読み込み   →編集画面で該当の子ヒントをクリック
発見までの 道筋
特定の手順のみ
発見までの クリック数
2以上
発見までに 必要な遷移数
1以上
発見までの 時間(習熟時の理論値)
約20秒以上

この解消のために行われたリサーチでは、解消の糸口として興味深い観察結果が得られました。 それは、施策の粒度がページに出ている粒度とイコールだと認識されている傾向です。

image

この調査結果に基づく私たちの答えは、ユーザーが期待するようにイントロと各ヒントとポップアップの3つは同じ粒度である、と定義し直し、それぞれが一覧に並ぶように変更することでした。

これによる最も大きな変化は、ヒントが1つずつ分割されて一覧に並ぶようになったことです。

ただし、それだけでは考慮すべきことがまだたくさんありました。特にヒントがたくさん並んだ場合に、むしろ探しものが難しくなる可能性があります。

このための明確な答えは、検索できるようにすることでした。

検索している状態のビュー
(上:リストビュー, 下:ギャラリービュー)
検索している状態のビュー (上:リストビュー, 下:ギャラリービュー)

検索によって、これまで長時間の探索作業やスプレッドシートでの管理が必要だったヒントの発見が、容易になりました。もちろんツアーやポップアップも。

また、各ヒントが一覧に並んだことによりブラウザの検索機能もフォローされます。

これらと後述するコントロール機能を合わせて、これからは誰でも素早く任意の施策を見つけることが出来るようになりました。

発見までの 手順
- 検索 - コントロール(並び替え, グループ) - コントロールされたリストを見る - (ブラウザの)検索
セルをクリック  →読み込み   →編集画面で該当の子ヒントをクリック
発見までの 道筋
様々なケース・手段に対応
特定の手順のみ
発見までの クリック数
0以上
2以上
発見までに 必要な遷移数
0以上
1以上
発見までの 時間(習熟時の理論値)
約3秒以上
約20秒以上

管理( ≒ コントロール)できる一覧に

検索は便利ですが、毎回検索して探すとなると、そこには非生産的な苦痛が伴います。

そこで、必ずしも検索せずとも管理しやすい状態を作ることにしました。 このために、並び替えグループという2つのコントロールを提供しました。

グループに“タグ”を指定した状態
グループに“タグ”を指定した状態

オススメの並び順

もし並び順にこだわりや特段の必要性がなければ、最終アクセス新しい順(降順)に並べておくことをオススメします。

直近、あるいは直前に行っていたこと・行おうとしていたことを思い出すトリガーとなり、スイッチングコストを下げ生産性を向上できるためです。

最終アクセスの降順に並べた状態
最終アクセスの降順に並べた状態

ギャラリービューで、 視覚情報による探索・管理が可能に。

また本日より、大きなサムネイルが特徴のギャラリービューを追加しました。今回のアップデートで最も見た目の変化が大きい点です。

これまで、管理画面での捜し物はタイトルを目視するか、編集画面をポチポチとクリックしてコンテンツを見て回ることによって行われていました。

しかし、何度もクリックしないと中身が全く分からないのは生産性が高いとは言えません。作った人しか分からない、といった事象が起きやすい構造でした。

これは特にチームなど複数人で使うシーンにおいて、コミュニケーションコストと逐次の探索コストを雪だるま式に高めてしまいます。

いくつかのテスト結果によれば、この原因の1つは、一覧に視覚情報が少なすぎることでした。

新たに追加されたギャラリービュー
新たに追加されたギャラリービュー

そこでサムネイルを生成するようにし、一覧で中身をある程度見ることが出来るように。

ギャラリービューによって、テキストだけでなくビジュアルを頼りに、より多くの人が気軽に管理・探索できるようになりました。

リストビューが、より有用に。

リストビューにもアップデートがあります。

これまでのリストには、Onboardingの利用において必要でない情報やほとんど参照しない情報が無駄な面積を占有していました。

これらはOnboardingの初期の設計時には必要と思われていたもの・必要になると予定されていたものでしたが、実際には使用されていないものです。

それらをリストから削除し、よりユーザーに必要な情報と入れ替えることで最適化されました。

新リストの行(上)と旧リストの行(下)。
サムネイル, 配置している場所, タグが追加され、カテゴリ, プレビュー開始URL, 更新日, デバイスが無くなった。
新リストの行(上)と旧リストの行(下)。 サムネイル, 配置している場所, タグが追加され、カテゴリ, プレビュー開始URL, 更新日, デバイスが無くなった。

カテゴリの削除とタグの追加

ツアー, ヒント, ポップアップといった施策の種別は、これまでは”カテゴリ”と呼ばれていました。

このカテゴリは”タグ”という新しい概念へと合体し、カテゴリという概念は無くなりました。

タグはカテゴリと違って所与のものではなく、任意のテキストで作成でき、かつ任意の施策に紐付けることが出来ます。複数のタグを紐付けることも可能です。

”タグ”がカテゴリに代わって新設された
”タグ”がカテゴリに代わって新設された

なお新たに施策を作成した際、デフォルトタグとしてツアー, ヒント, ポップアップのいずれか適したタグが自動で付与されます。

そのためこれまでと同じようにカテゴリとして活用することが出来るようになっています。

※現在はタグを新設することは出来ません。今後のアップデートで新設可能となる予定です

右クリックのサポートで生産性を向上

アップデートに際して当初からこだわったのが、ハードウェアのネイティブな操作にもっと対応すること。具体的には右クリックをサポートすることです。

今回の変更の中では、各施策について右クリックをサポートしています。現在サポートしているのはここだけですが、今後も他の機能やページでもネイティブな操作に対応していく予定です。

右クリックで開くメニュー
右クリックで開くメニュー

ナビゲーションバーの 認知負荷が下がりました

ナビゲーションバーは、スタイルがリファインされたほか、施策一覧タブを分割しています。

リサーチの過程では分割しない状態や別の粒度による分割も探索されましたが、テストの観測結果をもとにステータス別に分割。より自然なナビゲーション体験を提供します。

新ナビゲーションバーの検証による遍歴
新ナビゲーションバーの検証による遍歴

より生産性の高い新しいスタイル

新しい施策一覧では、全面的に再設計されたサーフェスとスタイルを採用。より洗練され、かつ適切なスタイルやアイコン、カラースキームです。

この再設計されたスタイルはモダンであるばかりでなく、認知負荷を低下させるよう設計されました。より多くの機能でこの効果を体感いただけるよう、今後ほかのページやUIについても順次適用される予定です。

現在このスタイルはDesign Tokenの一部として公開されており、今後も更新予定です。

今後の予定

旧UIについて

新しいUIがリリースされましたが、旧UIも周知期間の間しばらく保守される予定です。なお、周知期間のスケジュールは現在検討中です。

部分的なリリース

今回のアップデートは、一部のユーザーは利用できません。

利用出来ないケースは、個別のケースなため詳細は非公開ですが、新UIが十分に効果を発揮しないと思われるいくつかのケースに当てはまるユーザーです。

この制限は一時的なもので、今後の更なるアップデートによって利用可能範囲を同ユーザーを含む全ユーザーへと拡大予定です。

Credit

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