NOW LOADING... 0%

root inc

UIアニメーション – 見た目を楽しくして、課題解決する方法

ユーザーインターフェイスに使われるアニメーションは最近注目を集めていて、熱い議論を呼び起こしているトピックです。アニメーションについて、UIに負担をかける不要な機能だ、UIを複雑なものにするものだという人も多くいる一方で、多くのユーザーはモーションはインタラクションエクスペリエンスにおいて不可欠な要素であると感じています。

ですので、デザイナーとデベロッパーは、アニメーションをより楽しい見た目にし、現代のアプリやウェブサイトにおける問題解決の機能をもたせるために、より洗練された方法に挑戦していくべきです。

どうして、ユーザーはモーションがこんなに好きなのでしょうか? なぜなら、アニメーションはこの瞬間の本当のインタラクションを実現し、人が実際に物に触るときに近い感覚と認識をつくるからです。そして、よりナチュラルな感覚を実現できれば、ユーザーエクスペリエンスはよりポジティブに感じられるようになります。同時に、アプリやウェブサイトをいじる労力も減り、どのように動作するのかがより明確になります。当然、それはユーザーの満足度にもつながります。間違いないのは、満足感と楽しさこそ、ユーザーがそのプロダクトをもう一度使いたいと思う理由のトップであるということです。

インターフェイスに使われる全てのものと、それらとのインタラクションのプロセスと同様に、アニメーションもまた、ただの飾りではなくて機能的な要素が不可欠です。

あるデジタルプロダクトのユーザーエクスペリエンスを計画する際にモーションの要素を考えるとき、デザイナーはプロダクトのユーザビリティ、有用性、望ましさをいかにモーションで高めることができるのかを深く分析してから、レイアウトやトランジションに組み込む決定をするべきです。UIにおけるアニメーションを作る上では、思慮深いアプローチが求められますし、はっきりとした目的意識が必要です。インタラクションの過程でアニメーションを使う利点と実用性が明確であり、それは考えられるデメリットを凌駕するものである必要があります。

課題を定義する

アニメーションの見た目をよくするだけでなく、その機能性を高めるためのベストアプローチの一つは、アニメーションがどのような問題を解決できるのかを明らかにすることです。その作業は、デザインプロセスの全てのステージで実施ことができます。

ユーザーリサーチをする

ユーザーリサーチによって、ターゲットユーザーを知ることができます。彼らの年齢、好み、テックリテラシーのレベル、プロダクトが利用される環境と条件、そしてユーザーエクスペリエンスに影響を与える可能性のあるユーザー側のさまざまな要因といったことが分かります。

マーケティングリサーチをする

マーケティングリサーチによって、既存のプロダクト、その強みと弱み、ユーザーの特定の問題を解決できる「独自のウリ(USP)」を定義する上での重要なベースとなるユーザーロイヤリティをつくる方法と、独自のプロダクトのプレゼンとパフォーマンス方法を考えることができます。

UXのワイヤフレーム化

UXのワイヤフレーム化の段階では、インタラクション、レイアウト、トランジションのロジック、アニメーションでどこを強化できるのか、最初の仮定を考えることができます。

プロトタイプをつくる

プロトタイプをつくる段階では、スクリーン上での実際のインタラクションについて新しい側面を発見できるでしょう。

UIデザイン

UIデザインの段階では、プロダクトのスキームとシステムのビジュアルプレゼンテーションの複雑さが分かり、アプリまたはウェブサイトにアニメーションを適用する際の新しい視点が得られます。

ユーザーテスト

ユーザーテストでは、アニメーション化された要素に関して下した決定が正しいかどうか、そしてそのメリットが潜在的な落とし穴を上回るかどうかが分かります。

どの段階においても、ユーザーが直面する可能性のある大小の問題を明らかにするという目標をデザイナーが設定すれば、アニメーションや他のデザイン要素が問題解決の役割を果たすことができます。

インターフェイス上のアニメーションが解決できる問題として、典型的な例を見てみましょう。

課題:アクションが実行されたかを知りたい

これは、UIに細かいアニメーションを使うことで簡単かつ迅速に解決できる問題の1つです。 モーションによって明確な仕上げが実現しているマイクロインタラクションはユーザーにすばやくフィードバックを与え、ナビゲーションをシンプルかつ直感的なものにすると同時に、そのエクスペリエンスをポジティブで効率的にします。アニメーションのボタン、スイッチ、トグル、その他のインタラクティブな要素によって、ユーザーは迅速に視覚的に認識することができます。

 

(スイッチを制御するアニメーション)

(ハンバーガーメニューのアニメーション)

(ハンバーガーボタンのインタラクション)

(タブバーのインタラクション)

(追加ボタンのインタラクション)

ゴム玉のようなインディケータ)

課題:アクションが処理中であるかを知りたい

これもまた、モーションデザインのもつ多様な可能性を活かすことのできる大きな領域です。ユーザーはデジタルプロダクトに触れる際に、各段階ごとに何が起きているのかを理解したいと考えます。ユーザーを不安な状態で待たせることは、ユーザーを失うリスクになります。ですが、ユーザーに情報を与えれば、待つことはそれほど大きなストレスにはなりません。だからこそこの点は十分に考慮されるべきで、インターフェイスアニメーションによって実現できる多くの方法があります。引っ張ってリフレッシュする形のインディケータが効果的になり、その威力がもっとも発揮される機会でもあります。

(引っ張ってリフレッシュ)

(プレローダー)

(引っ張ってリフレッシュ)

(プルダウンー砂時計)

(プルダウンーロケット)

課題:進捗状況が見えず、完了までの時間が分からない

多くの場合、プロセスが進行していることをユーザーに知らせるだけでは十分ではありません。ユーザーはそれ以上のものを求めていることが多いです。つまり、そのプロセスがどれだけ迅速に行なわれているのか、そして完了までにかかる時間はどれくらいなのかというものです。ここでも、インターフェイスアニメーションが大きく役立ちます。ロードバーと進捗バー、アニメーションによるタイムライン、その他ダイナミックな要素によって、次のような多くの問題を解決できます。

・プロセスの進捗度合いをユーザーに知らせる

・プロセスの完了を待っているときのネガティブな経験を和らげて、楽しさを加えることができる

・独自の方法でデザインとアニメーションができれば、ユーザーが他のユーザーにシェアしたくなるような人気の機能となり、より多くのユーザーが参加するようになる

(時間計測アプリのGIF)

(ダイナミックスクロールのGIF)

課題:スクリーンを台無しにしたくない

これは、インターフェイスデザインにおいてじっくり考えるべき重要なことです。多くのデータであふれかえり、きれいに整理されていなければ、スクリーンやページはごちゃごちゃになります。そして、どのように動作するのか、どこで必要な情報が手に入るのかを理解するために、ユーザーはより多くの労力を費やすことになります。

より多くの労力が必要になれば、ユーザーがもっとシンプルな解決策を求めて離れてしまう確率も高くなります。ほとんどのケースで、ユーザーは自分の生活がよりシンプルに、簡単になるようなアプリやウェブサイトを使いたいと望んでいます。インタラクションでさらなる労力や時間が取られるのではなく、むしろ自分のために仕事をしてくれるようなものを求めているのです。アニメーションは、さまざまなデータやセクションとのインタラクションをより良いものにし、データが多く複雑なインターフェイスにおいても、すべて整理されているような感覚を提供する良い方法になりえます。

(スポーツアプリのGIF)

(カードのアニメーション)

(ボート発着所のアプリ)

(ブログアプリ)

課題:重要なことを最初にみたい

視覚的な階層と分かり易いナビゲーションは、インタラクティブなデジタルプロダクトをつくるデザイナーにとって常に大きな懸念点になります。目標と条件に合わせて、ユーザーの注意がインタラクションの重要な要素にすぐに引きつけられるべきです。

インターフェイスのアニメーション要素はその目的を実現する上で強力です。レイアウト上で重要な部分をすばやく引き立たせることができるのです。

(タブバーのインタラクション)

(Restoアプリ)

課題:ナチュラルなインタラクションを得たい

ほとんどのユーザーがうまく言語化できないながらも、ユーザーエクスペリエンスに大きな影響を与える課題です。もしユーザーが「なにが悪いのかは分からないけど、なにかがおかしいんだ」というようなことを言ったとしたら、インタラクションをもっとナチュラルにするべきか考えてみてください。

インターフェイス上のアニメーションは、多くの認知処理を必要としないような実際の物とのナチュラルなインタラクションに似た、楽しい感覚をつくることができます。たとえば、ある物体を引っ張る、押す、タブから除外するといった動きはナチュラルであるべきです。同時にユーザーはデザイナーが達成した洗練された仕事を見ることができません。つまり、ユーザーがそれを当然とみなし、ユーザーが心地よく使えるという事実こそがデザインによるソリューションに対する最大の褒め言葉となるのです。

(ソーシャルネットワークのGIF)

(本の交換アプリ)

(レストランメニューのアニメーション)

こうした課題はウェブインターフェイス上のインタラクションでもよく見られるものです。ウェブページをスクロールする際に、レイアウトの各要素がよく考えられた形で動くことで、ユーザーエクスペリエンスが大きく向上し、ページがいくつかバラバラのパーツで組み立てられているのではなく、一つの統合されたスムーズなインタラクションがあるという感覚をつくることができます。なによりも、楽しく、エンゲージメントを促すもので、そうした感情はユーザーのリテンションという点でもプラスに作用します。

課題:画面が退屈である

当然のことながら、インターフェイスについて語る際、人はよく機能性とユーザビリティが最重要であり、それこそが鍵であり、考慮が必要な唯一の点であるとさえ言われることもあります。そうした考えは正しく、論理的なものですが、同様に人は論理にだけ動かされるのではないという事実を無視しています。感情面そして美的感覚の満足といった要因もまたユーザーエクスペリエンスを大きく変えるものです。

ユーザビリティと有用性、そして感情と美的感覚のバランスをよく考えてつくることで、ユーザーフレンドリーなプロダクトを実現することが可能です。そして、アニメーションはインターフェイスデザインにおけるこの側面を実現する上で有用です。色の美しさやグラデーションを引き立たせ、レイアウトに息を吹き込み、ダイナミックにもスムーズにも動きをつくり、モーションと独特の転換でUIの各要素の力を強めることができます。

(カレンダーアプリのアニメーション)

(カフェのクーポンアプリ)

(連絡先リストのコンセプト)

(レシピアプリ)

(ジューシーなプレイヤー)

そんなわけで、ユーザーインターフェイス上のアニメーションは、インタラクションのさまざまな課題を解決する上で大きなポテンシャルをもっていることは間違いありません。一方で、ほんの小さなモーションをUIに加える際にも、メリットだけでなく考えられるデメリットに関する思慮深いアプローチと分析をする必要があります。アニメーションはユーザーをサポートするべきであって、インターフェイスにおける主要な目的ではないのです。

原文:https://uxplanet.org/ui-animation-eye-pleasing-problem-solving-a8b27013f55c#.iztk0vhjr

翻訳者:佐藤ゆき

Pocket

人気記事

お問い合わせ

新規事業立ち上げやWebサービスの改善でお困りの方は
お気軽にご相談ください。
課題に応じたデザイン手法をご提案させていただきます。

お問い合わせフォームへ