Advertisement

functional-animation-in-ux-design

 

機能的なアニメーション(英: Functional Animation)とは、論理的ではっきりとした目的を持った、控えめなアニメーションを指します。読み込み時間を短く感じさせるだけでなく、ユーザーインターフェースに生命を吹き込みます。

 

 

インターフェースデザインを掛けあわせたり、分割したり、シェイプやサイズを変更することで、まるで人間のように、生きているような動きを実現できます。ナビメニューに応じてユーザーをスムーズに移動させたり、スクリーンに応じて要素が整理、変更されるのを伝えたり、デザイン要素の階層を補強するために、機能的なアニメーションを利用するように心がけましょう。

 

 

今回は、アニメーションをうまく利用する6つの基本原則、テクニックをまとめてご紹介します。

 

 

 

詳細は以下から。

 

 

 

01. レスポンシブなアニメーション

 

UIデザインにおいてビジュアル・フィードバック(英: Visual Feedback)はとても重要で、ユーザーの操作をうまく通知します。日常生活においてボタンなど、わたしたちの操作に反応する動きを期待しています。

 

1-JMF7PzZzVJnmRG_Rm91vGQ

 

 

ユーザーインターフェースの反応は素早くすることで、どこをクリックしたか正確に伝え、新しいインターフェースと作成した要素との関係をうまく示します。サイトやアプリ全体をクリックしやすくなり、何が起こっているのかすぐに分かるようになるでしょう。

 

1-7Rpnlu_SIU5oxkx04COVcA

 

 

 

02. 関連性のあるアニメーション

 

新しく作成されたパーツや、行った動作との関連性をうまく示しましょう。この関連性のある結びつきに関する考え方は、ユーザーがどのようにレイアウトが変更され、何が変更する引き金、トリガーになったのか理解しやすくする、という論理から成り立っています。

 

 

以下は、2つのナビメニュー用のアニメーション変化です。ひとつ目は、タッチしたボタンから離れたところから表示され、関連性テクニックをうまく活用できていません。

 

1-dA4FQv8kPMPOCtMI0ROc7Q

 

 

ふたつ目はタッチしたポイントからメニューが表示されています。こうすることで、タッチしたポイントとの結びつきをうまく表現できます。

 

1-ybsLIi1mP11AteWzLp3vSQ

 

 

もうひとつの参考例は、特定の状況で機能が変化するボタンで、「再生」や「停止」ボタンがもっとも一般的でしょう。再生ボタンから一時停止ボタンに変化することで、ふたつの動作がリンクしていることを意味し、クリックすることで片方だけを見えるようにしています。ここにアニメーション遷移を加えるときは、スムーズな動きで、とぎれとぎれにならないようにしましょう。

 

1-AjZdyjy-rCglKHnndA-CfQ

 

 

 

03. より自然なアニメーション

 

ユーザーがびっくり驚いてしまうようなアニメーション遷移は避けましょう。それぞれの動きは、日常生活における動きに影響されるべきで、スピードが早くなったり遅くなったりするのには、物体の重さや表面の摩擦が関係しています。同じような考えとして、はじまりと終わりに間を置くことで、より心地よいインターフェースデザインを実現できます。

 

 

以下のサンプルでは、ユーザーがリストをクリックすると、詳細がズームで表示されます。カードのサイズが大きくなるときに、曲線を描きながら展開しているのが分かります。

 

1-x3bKB3_Utn9ZsYOVAUeCIA

 

 

 

04. 意図的なアニメーション

 

着目したいポイントに、うまいタイミングで誘導しましょう。ユーザーインターフェースにおいて動きは、もっとも目立つ要素です。文字テキストや画像イメージも、アニメーションには勝つことはできないでしょう。良いアニメーション遷移は、次のステップへとユーザーを誘導するのに役立ちます。

 

 

はじめて訪れたユーザーは、次に何が起こるか予想することができませんが、適切なアニメーションは、ユーザーがどこにいるのか確認でき、コンテンツが急に変更されないように工夫されています。

 

 

Mac OS では、ウィンドウを最小化するときにこのアニメーションを利用しており、最初と次のステップのつながりをうまく理解することができます。

 

1-cUuemraCtTmGdor3QvjOJg

 

 

もうひとつのサンプルは、リストやカード要素を選択することで、詳細はズームで表示されるアニメーション遷移で、こちらもコンテンツの結びつきを理解しやすくなっています。

 

1-ZP256QX2UpMJ8xvAlm9ZJw

 

 

 

05. 素早いアニメーション

 

要素にアニメーションを加えるときは、待ち時間がない程度に素早く動かし、変化を理解できる位の遅さに調整しましょう。

 

不要な時間ラグや、持続時間が長くなるような遅いアニメーションは利用しないようにしましょう。

 

1-yD4-lLqDg45rdIrjbgGqRw

 

 

アニメーションを遅くすることで、ページ読み込みが完了するまでの時間が長くなってしまい、最終的にユーザビリティーを損ねてしまいます。

 

アニメーションの駄目なパターン

 

 

アニメーションを素早くすることで、ユーザーはアニメーションが終わるのを待つ必要がありません。

 

1-pfUY5WeNJYUG5xvIrTiplQ

 

 

ユーザーが何度でも使いやすいように、アニメーション遷移は 300ms 以下に設定すると良いでしょう。

 

1-dtPS0dBgHbmst7PEgpjuEA

 

 

 

06. はっきりとしたアニメーション

 

ページ遷移では、複数のアイテムが異なる方向や向きに移動することで、ユーザーが混乱しやすくなるので、あまり多くの要素を一度に動かすのは避けましょう。

 

1-iBCr8Bw-h6EEC3Z-u-HkgA

 

 

アニメーション遷移ははっきりと、シンプルで、首尾一貫となるようにしましょう。アニメーションの実装においても、「シンプル・イズ・ベスト(英: Less is More)」の考えを念頭に入れておきましょう。

 

1-YHgeqAVAyoAbKu9-kGOwQA

 

 

さいごに。

 

いかがでしたでしょうか。このようにアニメーションは行き当たりばったりではありません。それぞれの動作の裏には、はっきりとした目的があります。アニメーション遷移によって重要なポイントに着目させ、ユーザーが迷子になるのを防いでくれます。ウェブサイトやアプリんのプロジェクト内容に関わらず、これらの基本原則を利用することで、よりはっきりと、分かりやすい体験を提供できるでしょう。

 

 

気配りをもってデザインしましょう。それぞれのディテールに目を向けることが、より人間らしさを加えたアニメーションをデザインする鍵となるでしょう。

 

 

サムネイル@ : Tropical Botanical Collection by Feanne – Creative Market

参照元リンク: Functional Animation in UX Design: What Makes a  Good Transition? by Nick Babich – Medium.com

参照元リンク : Matrial Motion – Material Design by Google