- 新しい施策一覧
- “ガイド” → “施策” へ
- ヒントが見つけやすく
- 管理( ≒ コントロール)できる一覧に
- オススメの並び順
- ギャラリービューで、 視覚情報による探索・管理が可能に。
- リストビューが、より有用に。
- カテゴリの削除とタグの追加
- 右クリックのサポートで生産性を向上
- ナビゲーションバーの 認知負荷が下がりました
- より生産性の高い新しいスタイル
- 今後の予定
- 旧UIについて
- 部分的なリリース
- Credit
新しい施策一覧
今回のアップデートでは、”施策一覧” にたくさんの変更が行われました。
“ガイド” → “施策” へ
私たちはこれまで、ユーザーが作るオンボーディングの総称を”ガイド”という、特有の用語でご案内してきました。
しかし、こういった用語はOnboardingの構造をスムーズに理解することを難しくしている一因です。
そこで一覧に並ぶ概念の名前を、”施策”へと変更。一般的な言葉になって認知負荷が下がり、スッと理解できるようになりました。
”施策一覧” へと生まれ変わった一覧では「ガイドって何のことだっけ？」といった風に思い出す必要はもうありません。
.png&w=3840&q=90)
ヒントが見つけやすく
これまでは、任意のヒントを見つけるには、ヒントをクリックし、読み込み時間を待ち、コンテンツ欄をスクロールやクリックして回る必要があり、長い時間とストレスがかかっていました。
/w=3840,quality=90,fit=scale-down)
ヒントの数が多くなるほど特に管理が難しくなります。何がどこにあるかをスプレッドシートやエクセルに書いて管理しているユーザーもいるほどでした。
旧UI | |
発見までの
手順 | セルをクリック
→読み込み
→編集画面で該当の子ヒントをクリック |
発見までの
道筋 | 特定の手順のみ |
発見までの
クリック数 | 2以上 |
発見までに
必要な遷移数 | 1以上 |
発見までの
時間(習熟時の理論値) | 約20秒以上 |
この解消のために行われたリサーチでは、解消の糸口として興味深い観察結果が得られました。 それは、施策の粒度がページに出ている粒度とイコールだと認識されている傾向です。
/w=3840,quality=90,fit=scale-down)
この調査結果に基づく私たちの答えは、ユーザーが期待するようにイントロと各ヒントとポップアップの3つは同じ粒度である、と定義し直し、それぞれが一覧に並ぶように変更することでした。
これによる最も大きな変化は、ヒントが1つずつ分割されて一覧に並ぶようになったことです。
ただし、それだけでは考慮すべきことがまだたくさんありました。特にヒントがたくさん並んだ場合に、むしろ探しものが難しくなる可能性があります。
このための明確な答えは、検索できるようにすることでした。
/w=3840,quality=90,fit=scale-down)
検索によって、これまで長時間の探索作業やスプレッドシートでの管理が必要だったヒントの発見が、容易になりました。もちろんツアーやポップアップも。
また、各ヒントが一覧に並んだことによりブラウザの検索機能もフォローされます。
これらと後述するコントロール機能を合わせて、これからは誰でも素早く任意の施策を見つけることが出来るようになりました。
新 | 旧 | |
発見までの
手順 | - 検索
- コントロール(並び替え, グループ）
- コントロールされたリストを見る
- (ブラウザの)検索 | セルをクリック
→読み込み
→編集画面で該当の子ヒントをクリック |
発見までの
道筋 | 様々なケース・手段に対応 | 特定の手順のみ |
発見までの
クリック数 | 0以上 | 2以上 |
発見までに
必要な遷移数 | 0以上 | 1以上 |
発見までの
時間(習熟時の理論値) | 約3秒以上 | 約20秒以上 |
管理( ≒ コントロール)できる一覧に
検索は便利ですが、毎回検索して探すとなると、そこには非生産的な苦痛が伴います。
そこで、必ずしも検索せずとも管理しやすい状態を作ることにしました。 このために、並び替えとグループという2つのコントロールを提供しました。
オススメの並び順
もし並び順にこだわりや特段の必要性がなければ、最終アクセスが新しい順(降順)に並べておくことをオススメします。
直近、あるいは直前に行っていたこと・行おうとしていたことを思い出すトリガーとなり、スイッチングコストを下げ生産性を向上できるためです。
ギャラリービューで、 視覚情報による探索・管理が可能に。
また本日より、大きなサムネイルが特徴のギャラリービューを追加しました。今回のアップデートで最も見た目の変化が大きい点です。
これまで、管理画面での捜し物はタイトルを目視するか、編集画面をポチポチとクリックしてコンテンツを見て回ることによって行われていました。
しかし、何度もクリックしないと中身が全く分からないのは生産性が高いとは言えません。作った人しか分からない、といった事象が起きやすい構造でした。
これは特にチームなど複数人で使うシーンにおいて、コミュニケーションコストと逐次の探索コストを雪だるま式に高めてしまいます。
いくつかのテスト結果によれば、この原因の1つは、一覧に視覚情報が少なすぎることでした。
そこでサムネイルを生成するようにし、一覧で中身をある程度見ることが出来るように。
ギャラリービューによって、テキストだけでなくビジュアルを頼りに、より多くの人が気軽に管理・探索できるようになりました。
リストビューが、より有用に。
リストビューにもアップデートがあります。
これまでのリストには、Onboardingの利用において必要でない情報やほとんど参照しない情報が無駄な面積を占有していました。
これらはOnboardingの初期の設計時には必要と思われていたもの・必要になると予定されていたものでしたが、実際には使用されていないものです。
それらをリストから削除し、よりユーザーに必要な情報と入れ替えることで最適化されました。
/w=3840,quality=90,fit=scale-down)
カテゴリの削除とタグの追加
ツアー, ヒント, ポップアップといった施策の種別は、これまでは”カテゴリ”と呼ばれていました。
このカテゴリは”タグ”という新しい概念へと合体し、カテゴリという概念は無くなりました。
タグはカテゴリと違って所与のものではなく、任意のテキストで作成でき、かつ任意の施策に紐付けることが出来ます。複数のタグを紐付けることも可能です。
なお新たに施策を作成した際、デフォルトタグとしてツアー, ヒント, ポップアップのいずれか適したタグが自動で付与されます。
そのためこれまでと同じようにカテゴリとして活用することが出来るようになっています。
※現在はタグを新設することは出来ません。今後のアップデートで新設可能となる予定です。
右クリックのサポートで生産性を向上
アップデートに際して当初からこだわったのが、ハードウェアのネイティブな操作にもっと対応すること。具体的には右クリックをサポートすることです。
今回の変更の中では、各施策について右クリックをサポートしています。現在サポートしているのはここだけですが、今後も他の機能やページでもネイティブな操作に対応していく予定です。
ナビゲーションバーの 認知負荷が下がりました
ナビゲーションバーは、スタイルがリファインされたほか、施策一覧タブを分割しています。
リサーチの過程では分割しない状態や別の粒度による分割も探索されましたが、テストの観測結果をもとにステータス別に分割。より自然なナビゲーション体験を提供します。
/w=3840,quality=90,fit=scale-down)
より生産性の高い新しいスタイル
新しい施策一覧では、全面的に再設計されたサーフェスとスタイルを採用。より洗練され、かつ適切なスタイルやアイコン、カラースキームです。
この再設計されたスタイルはモダンであるばかりでなく、認知負荷を低下させるよう設計されました。より多くの機能でこの効果を体感いただけるよう、今後ほかのページや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
