ほんの10年ほど前までは、ユーザーインターフェースへのアニメーションの使用は、ポップアップやチカチカ点滅する広告バナーなどがほとんどでした。しかし、現在では大きく変わってきています。
インタラクションデザインとアニメーションの詳細は、ウェブサイトやアプリに根本的な違いをもたらします。この考え方は、以下でもはっきりと述べられています。
もはや静的なウェブサイトだけをデザインすることはありません。ユーザーがこれらの画面から実際にコンテンツを見る方法をデザインしていると言えます。
より良いデジタル製品をデザインするには、はじめからインタラクティブな性質をウェブサイトやアプリに取り入れる必要があります。今回は、効果的なUIアニメーションの活用方法について詳しくご紹介します。
アニメーションを使う理由
動き（英: Motion）はその性質上、ユーザーインターフェースにおいてもっとも目立つ要素です。文字テキストや静止画像も、動きに比べたら目立つことはないでしょう。わたしたちの視線は、動く物体に自然と追ってしまい、それは条件反射とも言えます。これを機能的なアニメーションとして利用してみましょう。
機能的なアニメーションとは。
機能的なアニメーションとは、機能の一部としてUIデザインに採用された控えめなアニメーションを指し、とても明確で論理的な目的を持っています。
- 認知負担を軽減する。
- 変化の見落とし（英: Change Blindness）を予防する。
- 空間的な関係におけるより良いリコールを確立する。
ユーザーを中心としたデザインアプローチでは、ユーザーインターフェースは直感的で、応答性があり、人間らしさが必要になります。機能的なアニメーションは、これらの目標を達成するのに役立ちます。では、機能的なアニメーションをもっと詳しく見ていきましょう。
機能的なアニメーションでUXを改善
アプリやウェブサイトの体験や印象は、インタクラクションを基本的な役割として利用し、組み合わせることでできあがります。動きを加えるポイントをうまく見つけることで、より使いやすく、機能的に仕上げることができます。
じっくり検討、テストされた機能的なアニメーションは、以下の機能、ポイントを実現することができます。
01. ビジュアル・フィードバック
より快適なインタラクションデザインは、フィードバックをうまく提供できます。フィードバックは、システムがユーザーのアクションを認識し、成功したかどうかにかかわらず、相互作用の結果を示します。特にこのグループのアニメーションは、とても控えめで、それに応じて設計する必要があるでしょう。
ボタンのフィードバック
わたし達の生活の中では、ボタンを押す行為に反応します。デジタルインターフェースの使い方を予測できるのと同じように、どのように反応するのか予測できることが大切です。
Source Credit : Jaron Pulver
行動結果を視覚化
基本的なルールに従い、アニメーションされたフィードバックを利用することで、何が間違っているのか、うまく強調することができます。
たとえば、間違ったパスワードを入力したら、横に振るような視覚的なアニメーションを加えてみましょう。「いいえ、もう一度やり直してください。」と、首を横に振るような動きに似ています。ユーザーはアニメーションにすぐに気づき、現在のステータスを瞬時に理解することができます。
また、ユーザーが実行しているアクションを強化することもできます。下の例では、ユーザーが送信ボタンをクリックすると、成功したことを示す前にローディングアニメーションがほんの少しだけ表示されます。チェックマークのアニメーションは、プロセスが正常に終了したと感じることができるでしょう。
Source Credit: Colin Garven
02. 状態の変化を抑える
デザインにアニメーションを追加するのに最適な場所として、「変化の瞬間」にも注目してみましょう。ユーザーインターフェースの状態の変化、特にウェブサイトにおける突然の変化は、ユーザーにとって何が起こったのか理解するのが難しいことがあります。これらの変化の瞬間は、UIにアニメーションを加えることで緩和することができます。
接続の確立
アニメーションの変化は、ユーザーインターフェースにおけるさまざまな状態を示す、仲介役のような役割を果たし、何が起こっているのかユーザーが理解しやすくしてくれます。ユーザーは単純に動きを追い、2つのUIの状態がどのように関連しているのか理解することができるでしょう。
Source Credit : Anish Chandran
また、サムネイルや詳細を表示するのにもうまく活用することができます。
Source Credit : Charles Patterson
このカードアニメーションでは、クリックすることで詳細情報が重なるように表示されることで、同じアイテムであることをはっきりと示しています。
変化への注意
アニメーションは、新しいオブジェクトが公開されたときや、隠されたオブジェクトがどこにあるのか確認するのに役立ち、見つけやすくしてくれます。スライド式で開くコンテンツなど、情報を隠したり、変更に注意が必要なときなどに利用できます。
下記サンプル例では、ハンバーガーアイコンをクリックすると、ナビゲーションメニューがスライドで表示されます。その動きによって、メインメニューが消えていないことを理解できます。
Source Credit : Tamas Kojo
03. システム状態の可視性
Jakob Nielsen がユーザビリティのために導き出した答えの１つとして、システムの状態を可視化することは、ユーザーインターフェース設計において重要な原則です。ユーザーにとっては、現在のシステムの状況をいつでも把握、理解できることがとても大切になってきます。
進捗インジゲータ
データのアップロードやダウンロードのプロセスは、機能的なアニメーションを採用する絶好のチャンスです。アニメーション付きローディングバーは、アクションが処理されるまでの予想時間をうまく表現できます。
またアニメーションは、なにかのアクションに失敗したときにも役立ちます。データのダウンロード失敗などでは、より快適性のある配信方法を考える必要があるでしょう。
Source Credit : xjw
引っ張って更新
ユーザーの待ち時間は、アクションが開始した瞬間からはじまっており、最悪のケースは、システムがそれを受け取ったかどうか分からないという場合です。
この引っ張って更新するテクニックは、瞬時に反応するよう心がけましょう。プロセスが開始したことを伝えるために、視覚的なフィードバックを与えることが重要で、アニメーションがここでも役立ちます。
Source Credit : Tony Babel
04. 解説アニメーション
ユーザーの流れや特定のインターフェースとのやりとりを理解するために、少しでも分かりやすく伝える必要があることがしばしばあります。特にユーザーにとって新しくて、あまり馴染みのない機能やインタラクションを含むユーザーインターフェースに当てはまります。
オンボーディング
ユーザーオンボーディングでは完璧なUXが求められ、フローを伝えるアニメーションでは初心者ユーザーがアプリにどのように関わるか、大きな影響を与えます。アニメーションはどれほど複雑なことでも、何かを面白い方法で伝えたいときに、無限の可能性を与えてくれます。
Source Credit : Anastasiia Andriichuk
視覚的なヒント
アニメーションは、いくつかの分かりやすいビジュアルキューを提供できます。解説アニメーションは、ウェブページが最初に開かれたときにもっともよく見られ、アニメーションはページの特定の要素をどのように使用するべきか示してくれます。
このタイプのアニメーションは、ストーリーが進むにつれて全体の仕組みが見えてくれるゲームなどでよく利用されています。ユーザーが自分の経験からあるポイントに到達したときだけ、このヒントが表示されるように工夫されています。
さいごに。
アニメーションはじっくりと考え抜き、洗練された方法で利用することで強力なツールとなります。
デザインは見た目以上の意味があるため、最初からアニメーションを採用し、デザインの一部としてより自然に考える必要があるでしょう。スティーブ・ジョブズがデザインについて語ったように、デザインは見た目やどう感じるかだけでなく、どのように動作するかが重要です。
海外サイト WebdesignerDepot で公開された 4 Ways Use Functional Animation in UI Design より許可をもらい、翻訳転載しています。
参照元リンク : 4 Ways Use Functional Animation in UI Design – WebDesigner Depot
