UI演出の役割として6つ挙げている中のアクションへの反応と理解を助けることについて書いていきます。
・注目させる
・アクションへの反応、理解を助ける
・世界観を表現する
・体感時間を短くする
・価値の向上
今回はボタン押下➡︎画面遷移という状況を例にして進めていきます。
アクションへの反応
アクションへの反応とは、ユーザーが行ったアクションに対しての反応（フィードバック）を表します。
▼ユーザーアクションの種類
ボタンをタップする
長押しする
スワイプ
アクションに対して直接変化が起きることで正しく操作できているか確認できます。
反応も理解を助けるアニメーションもない場合
ボタン押下のフィードバックがなければユーザーはボタンを押せているのか不安になります。
画面遷移時のアニメーションがなければ変化への理解が追いつかず混乱することがあります。
上の画像では
ボタン押下→ロード→画面遷移という流れですが、反応がないので押せているのか不安になり、ユーザーによっては連打してしまうユーザーも出てしまいます。
反応を取り入れる
ボタンをタップするアクションの場合
ボタンは押下アニメーションを行う➡︎押下後に遷移アニメーションを行う
これでボタンを押下して正しく押せているフィードバックをユーザーへ与えることで、押したことを認識させることができます。
アクションの反応は速度が大事
ボタンを押すというアクションに対して、ボタンの反応は即時にアニメーションさせなければならないです。
反応が遅れるほどユーザーは自分の操作の感触が遠ざかってしまい、自分のアクションの反応に結びつけにくくなります。
その結果、ストレスという形でユーザーへ不快感を与えてしまうので、必ずユーザーアクションに対しては瞬時に反応を促すことがとても大切になっています。
理解を助ける
反応だけだと、その後の出来事に対する理解が難しくなるため、何が起きたのか理解を助けるためのアニメーションが必要になります。
ボタン押下後の遷移を順序立てたアニメーションを取り入れることで、ユーザーへの理解を助けることができます。
遷移後の画面にアニメーションを入れる
ボタン押下後、先に次の画面の背景を見せることで別画面へ遷移したことへの理解を助けます。
その後にメインコンテンツの表示をすることで、ユーザーへ遷移したことと、次のコンテンツが表示されたことを順を追って示し、ユーザーに見て欲しいポイントを示すことができます。
遷移前の画面にアニメーションを入れる
こちらでは遷移前にアニメーションを入れることで、今から画面が切り替わるという認識をさせることができます。
遷移前のアニメーションは、各アイコン、コンテンツがアニメーションして画面から消えることで、このあとの動きをより理解しやすくするための導入になります。
遷移前、遷移後にアニメーションを入れて順序立てる
アニメーションを順序立てて表示することで、何が起き始め、何が起こったのか、次の画面のコンテンツは何を見ればいいのか、ユーザーが無意識に理解しやすい状態を作り出すことができます。
流れとしては
1.遷移前ーボタン、コンテンツが画面外へ捌ける
2.遷移後ー背景がフェードインする
3.コンテンツが表示される
この順番を行うことで、ユーザーのアクションに対するフィードバックもより明確に伝えることができ、ユーザーのアクションを画面がしっかりと反映していることもすぐにわかります。
そして、ロードも表示が簡単なこともメリットかと思います。
前の画面のコンテンツがはけた後にスピナーを入れることで、次の画面を準備しているというのも見せやすくなります。
即反応は大事だが、アニメーションはもっと大事
即反応
アニメーションを入れて体験を作る
アニメーションを入れた遷移は、時に表示するまでに時間を要することになります。
しかし、アニメーションのない最速を目指した表示はゲームにおいてはストレスへと繋がります。
まずはユーザーがボタンを押したことをしっかりと認識させる反応を出し、ユーザーが次のコンテンツで迷子にならない様にアニメーションで助けてあげることで、よりスムーズにゲーム体験を得ることができます。
ゲームはコンテンツが多く、何から始めればわからない、どうすればいいのかわからないことが多いので、少し時間を使ってでもアニメーションでユーザーの意識を誘導してあげることが大切になります。
ここまで読んでくださりありがとうございました！
ご意見ご感想はお問い合わせホームから、またはTwitterからお願いします！
