ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「サクラ革命」ボタンを段階的に表示することによって、ユーザーの視線を誘導、やることを仄めかすデザインになっています

こんにちは、ちょこです!

 

「サクラ革命」のホーム画面にて、アニメーションによる視線誘導がありました。
割と見落としやすい部分だと思うので紹介します。

サクラ革命のホーム画面のスクリーンショットです。画面左側にキャラクターの3Dグラフィック、右側に各種ボタンが配置されています

 

 

該当のシーンはこちらです。 

ホーム画面に遷移した際、下位階層のボタンが時間差でアニメーション表示されます。
時間差でボタンが表示されることにより、視線が誘導されます。

育成、出撃、編成のボタンを押下した時のホーム画面の挙動です

 

視線が誘導されることにより、ユーザーが次に取る行動を暗に仄めかすデザインになっています。

 

 

 

このデザインについてもう少し補足すると、 画面遷移時などは画面内の情報が大きく変わることがあります。

 

一度に情報が変わると、瞬間的には何が重要なものか分からない為「認知コスト」と「選択肢を選ぶコスト」がかかります。

 

この根拠については「ヒックの法則」があります。

uxdaystokyo.com

 

人間は、10個の選択肢から1つを選ぶより、5個の選択肢から1つを選ぶ方が早いとされている。この時、「選択肢が多いほど迷う」という心理が働く。非常に単純な法則だが、多くの人が現場で活用できていないものでもある。

 

こちらです。選択肢が増えていくのはあるあるですね…。

また、この法則は「ジャムの法則」とも呼ばれます。
もしかしたらそっちの名前の方が有名かもしれません。

 

 

このように選択肢が多い時の解決手法としては「段階的開示」があげられます。

uxdaystokyo.com

 

ヒックの法則にあるように、人は提供される情報が多ければ多いほど、判断力が低下する。これは、UIのみならず、説明書や指導書、空間デザインなどにも当てはまり、それらを理解することの妨げとなる。その解決策として利用できる手法が、この段階的開示である。HCI(Human Computer Interaction)で用いられるインタラクションデザイン手法のひとつでもある。

 

こちらですね。

ゲームUIの場合、webのように階層を分けるだけではなく、時間軸を利用して情報を表示する手法も使えるかと思います。

時間軸とは、今回のようにアニメーションを利用して情報を段階的に表示する手法ですね。

 

 

以上です。

  • 優先度を付けてユーザーに情報を伝えたい時
  • 情報が多すぎてユーザーが次の行動に迷わないようにしたい時

 

などしたい時の参考になれば幸いです。

育成、出撃、編成のボタンを押下した時のホーム画面の挙動です