アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。
この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。
システムステータスの表示
何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。
- ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクションを受け取ったことを視覚的なフィードバックで確認できるため、再び画面の要素をタップすることを防ぐことができます。
ユーザーにアクションの結果を返しましょう。画像：Colin Garven
- Pull to Refreshを使用して、ページを更新します。ローディングインジケーターの形式での視覚的フィードバックは、システムがリクエストに応じて動作していることをわかりやすく示します。
マイクロインタラクションで何が起こっているかわかります。画像：Ramotion
- コンテンツの読み込み待機時間も重要です。多くのアプリが、コンテンツを読み込むときにマイクロインタラクションを利用して、ユーザーの離脱を防いでいます。ローディングアニメーションは、ユーザーを視覚的に惹きつけます。その結果、ユーザーは待ち時間を短く感じるでしょう。
アニメーションはロード時間でもユーザーをひきつけます。画像：UI8
複数ステップのプロセスで異なるステップをつなげる
あるアクションを完了するためにいくつものステップが必要なことがあります。その場合、各ステップが互いにつながっていることを明らかにする必要があります。アニメーションを使用すると、各ステップを結びつけて全体の流れを作成できます。
以下は、アニメーションを使用した一連のプロセスのつながりを示す効果的な例です。
画像：Jakub Antalík
アニメーションは、デザイナーがプログレッシブディスクロージャー（段階的開示）を作成するのも助けます。プログレッシブディスクロージャーは、一度に提示する情報量を減らすことによって、インターフェイスを簡単にするものです。ここにプログレッシブディスクロージャーにアニメーションを使い情報を示す２つ例があります。
画像：Ramotion
画像：Anton Skvortsov
新たな要素の提示
ページに新しい要素を導入する際、開発者はユーザーの「なぜその要素が必要であるのか？」という疑問に答えようとします。アニメーションは、新しい要素を導入するときに、その要素の関係性とヒエラルキーを定義するのに役立ちます。
ユーザーに空間的な方向感覚を与える
アニメーションは、ユーザーが空間情報のメンタルモデルを構築するのに役立ちます。これはモバイルユーザーにとっては特に重要です。注意力のスパンが短いこと、画面の小ささなどによりモバイルユーザーは画面上で簡単に迷子になります。
アニメーションを使うことで、ある状態から別の状態にどのように遷移するかがわかりやすくなります。さらに、ユーザーが現在行っているアクションに関する情報を与え、画面上で迷子にならないようにします。
オリエンテーションのアニメーションはユーザーが今何をしていて、どのページから来て、どんな関係があるかを示します。画像：Jae-seong, Jeong
下の例では、フローティングアクションボタン（FAB）がヘッダーに変換され、これらの２つのオブジェクトが互いにどのように関係しているかを明確にしています。
アニメーションが要素どうしの関係性をわかりやすくしています。画像：Anish Chandran
認知負荷を最小化する
認知負荷は、製品を使用するために必要な精神的負荷の量を指します。認知負荷は、ユーザーがアプリをいかに簡単に操作できるかに直接影響します。一般的に、製品を使用するために多くの認知負荷がかかるほど、望ましくない結果になります。
デザイナーのゴールは、使いやすいインターフェイスを作成することです。アニメーションを使用すると、タスクを完了するために必要なユーザーの労力が軽減されます。
ほとんどのアプリでは、ユーザーはフォームに入力する必要があります。多くのフォームではラベルとしてテキストプレースホルダが使用されています。ここではユーザーが入力欄をタップすると、普通ラベルは消えてしまいます。結果、ユーザーがこの入力欄が何のためのものかを把握することが困難になるでしょう。一方、下の例のようなフローティングラベルは、ユーザーがコンテキストを把握できるので、長いフォームの入力も快適になります。
ユーザー入力の部分ではユーザーの記憶に頼ってはいけません。重要な情報は可視化するようにしましょう。画像：MDS
ユーザーが機能の変化を把握できるようにする
機能の変化は、インタラクションの後に要素が変化することで示されます。 たとえばユーザーがボタンをタップすると、ボタンは異なるステータスに変化したことを意味します。 アニメーションを使って、ユーザーの「この機能は今どんなステータスを示しているのか？」という疑問に答えることができます。
多くのモバイルインタフェースで見ることができる機能の変化の例は、スイッチです。 アニメーションによりユーザーは機能が今どんな状態にあるかを把握することができます。
ボタンタップ時のアニメーションで機能の変化を把握できます。画像：Jurre Houtkamp
場合によっては、ある１つの要素の機能的変化が画面全体の変化につながる場合もあります。たとえば、下の例はハンバーガーメニューが「X」に変わり、それと同時に新しい画面をアクティブにしています。
結論
アニメーションは洗練された方法で使用すれば、強力なツールになります。インターフェイス内の多くの機能的な問題を解決し、ユーザーの行動に敏感に反応して生き生きとした印象にします。どんなアプリをデザインするにせよ、ユーザーにストーリーを伝えることはとても重要です。そして、アニメーションはストーリーを効果的に伝えるために役立ちます。
