こんにちは、ちょこです!
「サクラ革命」のホーム画面にて、アニメーションによる視線誘導がありました。
割と見落としやすい部分だと思うので紹介します。
該当のシーンはこちらです。
ホーム画面に遷移した際、下位階層のボタンが時間差でアニメーション表示されます。
時間差でボタンが表示されることにより、視線が誘導されます。
視線が誘導されることにより、ユーザーが次に取る行動を暗に仄めかすデザインになっています。
このデザインについてもう少し補足すると、 画面遷移時などは画面内の情報が大きく変わることがあります。
一度に情報が変わると、瞬間的には何が重要なものか分からない為「認知コスト」と「選択肢を選ぶコスト」がかかります。
この根拠については「ヒックの法則」があります。
人間は、10個の選択肢から1つを選ぶより、5個の選択肢から1つを選ぶ方が早いとされている。この時、「選択肢が多いほど迷う」という心理が働く。非常に単純な法則だが、多くの人が現場で活用できていないものでもある。
こちらです。選択肢が増えていくのはあるあるですね…。
また、この法則は「ジャムの法則」とも呼ばれます。
もしかしたらそっちの名前の方が有名かもしれません。
このように選択肢が多い時の解決手法としては「段階的開示」があげられます。
ヒックの法則にあるように、人は提供される情報が多ければ多いほど、判断力が低下する。これは、UIのみならず、説明書や指導書、空間デザインなどにも当てはまり、それらを理解することの妨げとなる。その解決策として利用できる手法が、この段階的開示である。HCI(Human Computer Interaction)で用いられるインタラクションデザイン手法のひとつでもある。
こちらですね。
ゲームUIの場合、webのように階層を分けるだけではなく、時間軸を利用して情報を表示する手法も使えるかと思います。
時間軸とは、今回のようにアニメーションを利用して情報を段階的に表示する手法ですね。
以上です。
- 優先度を付けてユーザーに情報を伝えたい時
- 情報が多すぎてユーザーが次の行動に迷わないようにしたい時
などしたい時の参考になれば幸いです。