長いアニメーションの歴史の中で明らかになったものがあるとすれば、それは動く画像はいつだってユーザーの心を掴めるということです。アニメーションの目新しさは薄れたものの、今ではエンターテイメント以外の目的でも使われることが多くなりました。実際、時代を問わない魅力と汎用性を最大限に活用することで、Webサイトのユーザーに好ましく魅力的な体験を作り出すことができます。
しかし、特にUXデザインの立場から見ると、アニメーションはすべてが同様に作られているわけではありません。いくつかのアニメーションは、問題を解決せず、むしろ新たに生み出してしまっています。善意から作られていても、間違ったアニメーションはユーザーの目的の邪魔をし、インターフェイスを乱し、Webサイトに悪影響を与えます。デザイナーはアニメーションをUXデザインに組み込むメリットだけでなく、規則もはっきりと理解しなければいけません。
この記事では、UXデザインにアニメーションを使う際の規則について説明し、動的なデザインがブランドに利点をもたらすための重要な法則にも触れていきます。
単なる動画以上のもの
多くのデザイナーにとって、Webサイトやアプリに存在するアニメーションは、特別な魅力を示すための単なる追加機能でしかありません。しかし、的確に使えば、アニメーションはそれ以上の能力を発揮します。Webサイトに重要なメリットを与え、効果的なUXデザインに貢献するでしょう。以下ではアニメーションでUXを向上させる方法を紹介します。
アニメーションとストーリーテリング
アニメーションがUXデザインに貢献するもっとも強力な方法の１つは、ユーザーがすぐに理解できる感情を作り出すことです。感情は消費者行動に対して重大な影響を及ぼすことが知られています。したがってアニメーションのついた要素は、ユーザーから肯定的な反応を得る効果的な方法になるでしょう。
アニメーションによって感情を作り出す方法を理解するためには、アニメーションがどのようにストーリーを伝えるかを踏まえる必要があります。ある研究では、被験者はいくつかの円と三角形が動く動画を見せられました。その結果、被験者は図形がどのように動くか観察することで、物語を理解することができました。この想像上の物語が基礎になって、画面にある多角形が伝える「感情」を理解することができたのです。そのため、モーションはストーリーを語るために欠かせません。人々はストーリーから感情を理解するからです。
ユーザー体験とはストーリーです。デザイナーはWebサイトやアプリに従事する際、これらのストーリーを提供します。そしてユーザーは、オンラインで購買するためであれ、自撮り画像をアップロードするためであれ、コンテンツをシェアするためであれ、Webサイトやアプリを使うたびにそのストーリーを経験します。目標は、すべてのストーリーが途切れることなく効率的に届けられることです。
ストーリーをよりわかりやすく伝えるためにアニメーションのついた要素を使うことで、ユーザーと感情的なつながりを築きましょう。それには次のような方法があります。
- ボタンの色の変化によって、ジャーニーの中で何が実行できるのかユーザーに示す
- 視差効果によって、体験の異なる地点の間に連続性を感じさせる
インターフェイス上の小さな動きでさえ、プロダクトのユーザー体験を改善することができます。どの要素にアニメーションを組み込むのか注意深く選ぶことで、デザイナーは長期にわたって感情的な印象と反応をユーザーから引き出し、Webサイトやアプリに恩恵をもたらすことができるでしょう。
機能的要素としてのアニメーション
頭に入れておくべきこととして、アニメーションのついた要素は場所をとります。したがって、アニメーションは丁寧に扱う必要があります。つまり、ユーザーに強い印象を与えるためにアニメーションを組み込むべきではありません。印象を与えるためでなく、具体的な役割や機能を果たすためにモーションを追加する必要があります。アニメーションの効果的な使い方をいくつか紹介しましょう。
読み込み画面を退屈にしない
ユーザーはWebサイトやアプリが読み込まれるのを、たった２秒しか待とうとしません。１秒でも遅れると、多くのユーザーはより素早いリソースを求めて離脱してしまうでしょう。アニメーションを使ったローディング画面は、ユーザーがコンテンツを待っている間、彼らを楽しませ、夢中にさせ続けるために使われます。
Image Credit: Thomas Bogner (https://cdn-images-1.medium.com/max/800/1*rGbFrxz7MPmJFrUcM5stWg.gif)
ユーザーに手がかりを与える
デザイナーはアニメーションを使うことで、ユーザーがWebサイトやアプリでできることを事前にほのめかすことができます。たとえば、投稿のリストを単に表示させる代わりに、画面の下からスライドさせましょう。これによって、もっと投稿を見たければ上にスライドすればいいと伝えることができます。
Image Credit: EveryInteraction.com (https://www.everyinteraction.com/wp-content/uploads/2018/01/1-TF1_VOGweFH_G1NqrXRYNA.gif)
視覚的なフィードバックをリアルタイムに提供する
混乱を避けるために、Webデザイナーはアニメーションのついた要素を組み込んで、Webサイトやアプリでユーザーが実行するすべての行動のビジュアルフィードバックを提供できます。たとえば、ボタンがクリックされたり押されたりしたときに、色を変化させたり光らせたりしましょう。
Image Credit: EveryInteraction.com (https://www.everyinteraction.com/wp-content/uploads/2018/01/1-Xfunnzi7oqLFar2cRXfznw-1.gif)
ブランディングツールとしてのアニメーション
アニメーションがついた要素はユーザーの感情を呼び起こすことができるので、効果的なブランディングツールになります。ユーザーがWebサイトやアプリを開いた瞬間、動くグラフィックは喜びや期待、興奮、好奇心、そして共感すらも喚起します。適切な感情を呼び起こすことで、ロイヤリティを誘発し、ブランドへの愛着心を強めることができるでしょう。
Image Credit: Whizzly (https://cdn-images-1.medium.com/max/800/1*Jj799s3EEUwg_FuN_VGWQQ.gif)
アニメーションをブランディングのツールとして使う際には、動く要素がストーリーの価値を損なわないようにすることが重要です。むしろ、アニメーションのついた要素は体験の全体的な一貫性に貢献していなければなりません。ブランドやプロダクトの価値や長所を強調しながら、物語全体とうまく融け合う必要があります。
アニメーションを使うときに覚えておくべきこと
先に述べたように、アニメーションのついた要素をプロダクトに組み込むことに短所がないわけではありません。アプリやWebサイトでアニメーションの利点を最大限に活用するためには以下のことを覚えておく必要があります。
アニメーションは体験をサポートするだけ
ユーザーはコンテンツやプロダクト、サービス、体験を求めてWebサイトやアプリを訪れます。非常に特殊な状況でない限り、アニメーションがついたボタン、トランジション、スライダーなどを眺めるためにWebサイトを訪れるわけではありません。したがって、アニメーションのついた要素は決して中心に置いてはいけません。体験全体を改善するために配置するべきです。
Image Credit: EveryInteraction.com (https://www.everyinteraction.com/wp-content/uploads/2018/01/1-hf-9eVk2u0s4jJO3PMhU9Q.gif)
デザインにアニメーションを組み込むときはつねに自制して使いましょう。派手な装飾でユーザーに印象付けようとせず、アニメーションのついた要素がいつでもビジュアルやブランディングと一貫するようにしてください。アニメーションがプロダクトの要素と一緒にユーザーのインタラクションを助けることが重要です。
すべてにアニメーションをつける必要はない
俗に言われるように「できるからといってすべきだとは限らない」のです。上述の通り、すぐれた体験をデザインするにあたって、節度は重要な資質です。今回の場合では、要素にアニメーションをつけることが可能で簡単だからといって、追加することがユーザーの利益になるとは限りません。要素にアニメーション効果をつけてもユーザー体験に何も与えられないのであれば、モーションをつけないままで残しましょう。
だからといって、コンセプトを風変わりにしたり冒険的にしたりできないというわけではありません。実際、使い古されたコンセプトをユーザーに共感される新鮮なものに変えられるのは素晴らしいことです。ユーザーのインタラクションを助けるアニメーションであり、シンプルなモーションである限りは、ユーザーの集中を助け、より良い体験を作り出すことができるでしょう。
自然なモーションにする
アプリやWebサイト、そして使われている視覚的要素は、物理的にはまったく存在しません。物理法則には支配されていませんが、Webデザイナーは物理法則に基づいてデザインする必要があります。
たとえば、アニメーションのついたリストがユーザーの操作と同じスピードで反応すれば無理なく理解できます。なぜならユーザーはデジタル要素を、現実世界で慣れ親しんだ法則に基づいて操作するからです。インターフェイスの要素はユーザーの期待に沿う必要があり、そうしなければストーリーが壊れてしまいます。
Image Credit: EveryInteraction.com (https://www.everyinteraction.com/wp-content/uploads/2018/01/1-J3CkO4OiKaIJqW2_DnmU0w.gif)
この課題を達成するには、アプリやWebサイトの要素の「材質」と「重さ」をつねに意識してください。重さがないように「感じ」られる要素は必然的に早く動き、重いように「感じ」られる要素は質量があるように振る舞う必要があります。デザイナーは、物理法則が現実の物体にどのような影響を与えているかををしっかりと想像して把握していければいけません。
つねに実際のユーザーでテストする
製造企業はテストをプロダクトを公開する前の必要事項としてととらえています。この考え方をデジタルプロダクトにも適用しましょう。アニメーションを含めてすべての要素がブランドの本来の目標に合致し、意図した結果に対応するようにしなければいけません。
テストは余計な要件に感じられるかもしれませんが、デザイナーの仕事を大きく軽減してくれます。実際のユーザーがWebサイトやアプリにどのように反応するかを見ることで、デザイナーはユーザー体験を最適化して誰でも最終地点に到達できるようにするには、どの要素を修正する必要があるのか判断することができます。さらに、要素が完成してはるかに変更しにくくなる前に必要性を判断できるのです。最終的に、テストによってブランドとデザイナーの両方はコストのかかる間違いを回避することができます。
次の段階
百聞は一見にしかずというのであれば、画像が動けばどれほどの効果があるのか想像できるでしょう。アニメーションというツールには、ブランドならではのストーリーを伝えてユーザーと肯定的にやりとりできる高い潜在能力があります。ただ、アニメーションをプロダクトに組み込むことで得られるものはたくさんありますが、闇雲に使うと役立たないおそれもあります。
Webサイトの要素にアニメーションを加えることのメリットを最大限に享受するためには、ブランドとターゲットユーザーを可能な限り理解する必要があります。結局のところ、目標は、ブランドの強みと質の高さを強調するストーリーを伝えて、ユーザーを魅了する体験を提供することなのです。
