10年前、ユーザーインターフェイスでアニメーションやモーションを使うことは、ユーザーのことを考慮するのではなく、むしろユーザビリティの低下につながりました。なぜなら、ピカピカする派手なWebサイトや立ち上がるポップアップ、点滅するボタンなどが多用されていたからです。
しかし、アニメーションやモーションに対する認識は、ここ数年で大きく変化しました。 iPhoneやモバイルアプリの導入以来、多くのデザイナーは動的アニメーションの将来性を見越して経験を積んできました。そして、アニメーションはインターフェースデザインの重要な部分になりつつあります。なぜなら、アニメーションはデザイナーに「時間」という新たな次元を提供したからです。
現代のインターフェースは、静的な画面の連続ではありません。アニメーションによって製品に時間という次元が生まれたため、機械と人間のギャップを埋めることが可能になったのです。
ユーザーが楽しいと感じるとき、多くの場合はデザインの細部にアニメーションが組み込まれています。今回は、ユーザー体験をより向上するための、視覚に訴えるモーションデザインの例をいくつか紹介していきます。
ページ読み込みの時間を楽しくする
アプリに印象的なオープニングアニメーションがあると、ユーザーは開くたびにわくわくするでしょう。
しかし、ただ印象的なだけではないアニメーションもあります。たとえば、下にあるアニメーションは純粋に楽しいだけではなく、ユーザーの視覚に訴えることにより集中すべき場所を示します。
Uberのアプリを起動すると、滴のアニメーションがマップ上のピンに変化しています。
魅力的なコンテンツでサイトに慣れやすくする
ユーザーが初めてアプリを使うとき、まずそのアプリがどのようなものであるかを理解する必要があります。そして、アプリに慣れてもらうためには完璧なUXが必要です。フローに組み込まれたスムーズなアニメーションは、初心者のユーザーが今後アプリを使い続けるかどうかに大きな影響を与えます。
たとえば、下にあるアプリの場合、導入部分がわかりやすいデザインとチュートリアルになっていて、新しいユーザーにアプリの特徴を伝えています。
Ramotionのアニメーション
操作可能なコンテンツであることを伝える
アニメーションを使えば、アプリ内の各機能の操作性を、ストーリー仕立てにして説明できます。一連の操作をわかりやすく説明することによって、ユーザーは次にする操作がわかりやすくなります。
Ramotionのアニメーション
オリエンテーションを提供する
アニメーションを取り入れるのにもっとも適しているのは、画面が切り替わるときです。画面が切り替わったとき、前後の画面の関連性がわかりやすくないといけません。
静的なデザインでは状態の変化をうまく繋ぐことができませんが、アニメーションは、画面の前後関係やコンテンツ同士の関係を示す際、機能面とデザイン面の両方において役立ちます。
画面が切り替わるときにアニメーションがあると、ユーザーインターフェースの画面間で、仲介役としてユーザーを誘導することができるでしょう。
アニメーションは、画面の中でどう操作するのかを知る上で役立ちます。ユーザーは、ある要素の動きを追って、前後の画面が互いにどのように関連しているかを理解することができます。 Anton Aheichankaによるアニメーション
要素間の関係を説明する
うまく設計されたアニメーションの画面切り替えは、ユーザーの視線を注目してほしい場所へ正確に誘導できます。アニメーションでは、注視してほしい部分などの目的に合う要素に重点をおきます。
再生ボタンを押すと一時停止ボタンに切り替わります。２つのアクションはリンクしており、いずれかを押すともう一方のアクションが表示されます。 Anish Chandranによるアニメーション
空間認識
アニメーションは、ユーザーがアプリ内のどの部分を見ているのかをわかりやすくすることができます。どのバナーやコンテンツから見たいページへ行くのかを説明します。
アニメーションは、ページ間での動き方を知るのに役立ちます。
明確なフィードバックを提供する
アニメーションは、ユーザーの操作をより向上させるためにも使用できます。アニメーションのフィードバックは、ユーザーの操作が成功したかどうか、またその理由を示すのに役立ちます。
問題を示す
エラー状態の設計を考えるとき重要なのは、ユーザーにエラー状態であることを明確に伝えられるようにすることです。
以下のようなパスワード入力の際の横揺れは、首を横に振る動作と結びつきます。明確にエラーを伝える良い例でしょう。
アニメーション型のフィードバックは、複数の要素がユーザーの行動に反応するとより効果的です。
ユーザーを安心させる
アニメーションで、ユーザーがとった行動の結果を視覚化することもできます。「伝えるではなく示せ」という原則に従い、アニメーション型のフィードバックを使って、何が達成されたかを示すことにより、ユーザーに安心感を与えることができるでしょう。
下のストライプの例では、ユーザーが「支払い」をクリックすると、実行完了を示すスピンナーがすぐに表示されます。チェックマークのアニメーションは、ユーザーに簡単に支払いができたという印象を与えます。
クレジット：Michaël Villar
明確な意図を持ったアニメーション
すべてのアニメーションにおいて重要な要素の１つが論理性です。演出目的のアニメーションではなく、適切な使い方を示したり簡略にするための、論理的なアニメーションであることが重要です。
ただひたすらアニメーションを組み込んでしまうと、操作が予測不能になってしまい、UXを損ないます。
以下のようなアニメーションは、技術的にはうまく実行されています。しかし、写真をスワイプするとその人物の詳細についての翻訳文が表示される、と予測させるには不十分なアニメーションです。
ユーザーはすでに、実世界やアプリなどから、ジェスチャーに関して多くの先入観を持っています。つまり、要素を一貫性のない方法で動作させることは悪いUXに繋がります。イメージクレジット：Pavel Proshin
まとめ
モーションは、幅広い場面で使用でき、デザイン性と機能性を結びつけます。
また、モバイルアプリにモーションを組み込むことは、見栄えをよくするためではなく、ユーザー体験を向上させるためであるという意識を持つことが重要です。
