こんにちは！ちょこです！
今回は「パニシング：グレイレイヴン」のお知らせ画面の画面設計を紹介します。
画面の特徴としては、お知らせの本文を見るまでの手数が少ないことがあげられます。
UIの評価軸として、タスクを完了させるための手数が少ないことは一般的には良いこととされます。
お知らせ画面を設計する際の参考になれば幸いです！
お知らせ画面の紹介
該当の画面はこちらです！
画面左側にお知らせの見出し一覧、右側に本文のプレビューが表示されています。
アニメーションで見ると以下のような挙動です。
お知らせの本文が常に確認できるデザインになっています。
ニュースサイトのような設計ではなく、メールビューワーのような設計に近い印象を受けます。
レガシーなデザインのお知らせ画面
これに対して、レガシーなお知らせ画面は以下のような階層とデザインになっていることが多いように感じます。
「この素晴らしい世界に祝福を！ファンタスティックデイズ」を例に紹介します。
お知らせ画面トップでは見出しのリストが表示され…
いずれかの見出しを選択すると、お知らせ本文が表示されるデザインになっています。
アニメーションで見ると以下のような挙動です。
「パニグレ」の方が手数が少ないデザイン
比較してみると「パニシング：グレイレイヴン」の方が、本文を見るための手数が少なく済むデザインになっています。
お知らせ画面の目的のひとつに情報をユーザーに伝えるということがあげられます。
「ユーザーに情報を伝える」という目的のためのタスクを分解すると、以下の４つのタスクに分解できそうです。
- お知らせ画面に遷移する
- 見出しを選択する
- 本文の内容を読む
- 本文の内容を理解する
「パニシング：グレイレイヴン」の場合は「本文の内容を読む」というタスクの手数を減らし、ハードルを低くする効果があるように考えられます。
また「他の本文を読む」というタスクを比較しても「この素晴らしい世界に祝福を！ファンタスティックデイズ」の場合だと
- 戻るボタンのあるページ上部まで戻る
- お知らせトップに戻る
- 他のお知らせを選択する
と３手必要になります。
▲ほかのお知らせを見るためには３手必要。本文が長いと画面上部に戻るためのスクロールする長さも変わる
これに対して「パニシング：グレイレイヴン」の場合は
- 他のお知らせを選択する
以上の１手で済みます。
▲左側の見出しをタップするだけで他のお知らせが見れる
このように手数が省略できることによって、時短に繋がります。
同じ時間でも複数の本文を読ませることが可能です。
僅かな違いに感じるかもしれませんが、ユーザーの時間を無駄に奪わないためにも必要な工夫かなと考えます。
お知らせを読む時間よりもゲームを遊ぶ時間に使いたいと考えるのが自然かな、と考えます。
最後に「パニシング：グレイレイヴン」の画面デザインと同じような特徴をもつゲームを紹介します。
▲アークナイツ
▲三国-IKUSA-
「三国 -IKUSA-」既存のメンタルモデルと違うお知らせ画面のデザインがされていました - ゲームアプリのUIデザイン
▲ファイナルギア
「ファイナルギア」お知らせ画面の新しいメンタルモデルが出来てきてる…？ - ゲームアプリのUIデザイン
▲食物語
「食物語」最近よく見かけるお知らせ画面のデザイン - ゲームアプリのUIデザイン
▲三国志名将伝
「三国志名将伝」お知らせ画面のデザインが手数が少なくて済むデザインだった - ゲームアプリのUIデザイン
以上です。
お知らせ画面をデザインする際の参考になれば幸いです。
