UIとアニメーションの関係

こんにちは、ハラです。モバイルアプリで何気なく見るアニメーション、実は見た目を良くする為だけにあるのではなく、使用時のストレスや違和感をなくし使いやすさや満足感を高めるために使用されています。今回のブログではそんなUIのアニメーションについてご紹介いたします。

見た目だけじゃないアニメーション

まずは①の画面と②の画面のメニューボタンを押した後の反応を見比べてみてください。①と②でユーザーに違和感を与えないメニューの表示方法はどちらだと思いますか?

  ①    ②

 

大抵の方は②の方を選んだのではないでしょうか? ①ではメニューボタンを押した後にメニューが突然現れました。対して②ではメニューがスライドして現れました。スライドしてメニューが出てきた場合の方が違和感が無いのはなぜか? それはスライドして現れる方が現実に近いからです。現実では魔法のようにいきなり何かが出現することはありません、ユーザの想像を越えない現実に近い動きを加える事で自然でストレスのないメニューの表示が可能となります。①のように「よくわからない場所から突然現れる」という事になると、目線をどこに置くべきか定まらずストレスとなります。
ユーザーは、現実で起きる動きに近い表現に対しては自然に適応します、非現実的なアクションを起こすとユーザーは混乱してしまい、複雑なUIと捉えてしまいます。

そのほかにもアニメーションを使うと効果的な場面をご紹介します。

更新の動作
   

 

こちらは「画面を下にスワイプして放す」という動作により更新を行った場合に現れるアニメーションです。画面のどこからでもスワイプにより更新する事ができるこの方法は、ナビゲーションバーまで指を伸ばして更新ボタンを押し、画面に更新中と表示されるという流れがないため、ユーザにとってはボタンよりも楽な操作となります。しかし、このスワイプ更新にはアニメーションが必要不可欠です。もし、この操作にアニメーションが無かった場合、気づきとなる要素がないため、ユーザーは“どこまで下げればいいのか?” “更新がされているのか?”と悩んでしまいます。かといってどの辺りまで下げるべきなのかをチュートリアルで説明する事は、読まれるかわからない上にユーザーの使用を一時的に止めてしまうため、最良の手段とはいえません。このスワイプ更新のように、行って欲しい動作のイメージに沿ったアニメーションを加える事で、ユーザーは煩わしいチュートリアルを読む必要がなくなります。

削除と詰め
  ×    ○

 

リストなどで追加・削除を行った際にアニメーションが無かった場合、要素が消えたことや消えた空間が詰められたということがあまりにも突然で、ユーザーが認識をする事が難しく混乱します。また、削除と詰めなどの複数の動作が同時に起きる事も混乱の原因になります。この場合はアニメーションにより「削除」→「スペースを詰める」と言う順序をわかりやすく表示する事で混乱を避けることができます。このようにアニメーションにはアクションの順序を伝える手段として有効です。


UIにアニメーションを取り入れる事は非常に重要です。「言われてみれば、ここにアニメーション使われているよね」と、思われるぐらい自然に組み込むことが理想です。また、ポジティブな体験を伝え、ユーザーを飽きさせないようにする・惹きつけるアニメーションももちろんあります!(こちらもまた別の機会にご紹介してみたいと思います)では。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です