【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
アニメーションは、UXにおける重要な要素のひとつです。モバイルアプリ内での画面遷移時には、アニメーションを取り入れることで、非常に微細な部分に至るまでコミュニケーションが可能です。メッセージを送る、設定画面を開く、ボックスにチェックマークをつける、他の画面に切り替えるなどは、全て画面移行の瞬間です。画面遷移時にアニメーションを使用するのは、ユーザーのアクションを強化するのに最適な方法といえるでしょう。
この記事では、機能的なアニメーションが、ビジュアルデザインを補強しユーザーのインタラクションをサポートするのに役立つ事例をご紹介します。
あるアクションを行う際、ユーザーはそれに対して視覚上のレスポンスを期待するものです。ユーザーのリクエストを受けてアクションに対応をしているということを、システムは明確に示すと良いでしょう。以下、アニメーション化されたフィードバックがUXに寄与する事例を紹介します。
あるアクションを遂行するのに、ユーザーが複数のステップを踏まなければならないことも時にはあります。その際、それらのステップが繋がっていることを明確に提示するのが良いでしょう。アニメーションは、全てのステップを繋げ全体の流れをつくるのに役立ちます。
以下の事例は、複数のステップを直線的に繋げるためにアニメーションを使用した素晴らしい事例です。
アニメーションは、デザイナーがプログレッシブディスクロージャー(段階的開示)を構築する際に役立ちます。プログレッシブディスクロージャーは、一度に表示される情報量を削減することでアプリのインターフェースを学びやすくするものです。
以下は、このプログレッシブディスクロージャー(段階的開示)をうまく利用し、情報をよりわかりやすく表示している2つの事例です。
新しい要素をページに表示する際。ユーザーの注目をそのオブジェクトに集め、なぜそれが表示されているのかをユーザーにとって明確にするよう、デザイナーは努めています。アニメーションは、新しいオブジェクトを紹介する際に、その関係性とヒエラルキーを定義するのを手伝ってくれます。
アニメーションは、ユーザーが空間的情報のメンタルモデルを確立するのをサポートします。特に、モバイルデバイスを使用しているユーザーにとってこれは重要です。なぜなら、画面へ注意が向けられる時間の少なさと画面サイズの小ささによって、ユーザーはスクリーンの迷路の中で迷子になってしまうことがしばしばあるからです。
ユーザーの道案内には、アニメーションが役立ちます。アニメーションは、移動する情報同士がお互いに繋がっていることを伝えることが得意です。その時々のユーザー情報を表示することで、ユーザーが迷ってしまうのを防げます。
以下の事例では、フローティングアクションボタン(FAB)がヘッダーに変化し、この2つのオブジェクトがお互いに関連し合っていることを示しています。
コグニティブロードとは、あるプロダクトを使用する際に要する精神的な努力量のことです。これは、ユーザーがあなたのアプリとどれほど簡単に関われるかどうかに、直接的に影響しています。一般的に、プロダクトを使用する際の努力が大きければ大きいほど、望ましくないとされます。
デザイナーのゴールは、使いやすいインターフェースをつくること。アニメーションをうまく使えば、タスクを完了するのに要する努力を減らせます。
ほぼ全てのアプリにおいて、ユーザーは何かしらのフォームを記入する必要があります。多くのフォームは、フィールドにラベル付けをするためにテキストの記入欄を持っています。ユーザーがそのようなフィールドをタップすると、ラベルは消えます。その結果、そのフィールドが何であったか、ユーザーにとって分かりににくくなってしまいます。
そこで、記入欄のラベルを浮かばせることで、ユーザーに文脈を与えつつ、長いフォームをより快適に記入できるのです。
ファンクションの変更は、インタラクション後にエレメントがファンクションを変更した際に起こります。例えば、ユーザーがボタンをタップした際、そのボタンは異なる意味を持つようになります。アニメーションは、「このエレメントは今度は何だろう?」というユーザーの質問に答えるのに役に立ちます。
モバイルインターフェースで見られるファンクション変更の一般的な事例は”トグル”です。アニメーションを使用することで、エレメントの状態をユーザーが確認できます。
いくつかの事例では、ひとつのエレメントのファンクション変更によって全体の見た目が変わることもあります。例えば「X」の文字が全体の新しい見た目をアクティベートさせる、以下のような事例があります。
洗練された使い方をすると、アニメーションは非常に強力です。インターフェース上の多くの機能的な課題を解決し、ユーザーにとって生き生きとレスポンシブなデザインを提供してくれます。どのようなアプリをデザインしても、あなたはユーザーにストーリーを語らなければなりません。アニメーションは、そのストーリーをより効果的に語ってくれるのです。
(翻訳:Mariko Sugita)