アニメーションの専門家に聞いた、ユーザー体験を向上させるマイクロインタラクションの使い方 | アドビUX道場 #UXDojo

エクスペリエンスデザインの基礎知識

「モージョンデザインと聞いてまず頭に浮かぶのは、ページ遷移の際のアニメーションや、視覚化されたデータを強調する動きかもしれません。ですが、最も効果的なUIのアニメーションは、多くの場合、ずっと小さなスケールで起きるものです」。Animation at Workの著者であるWebアニメーションアンバサダーのレイチェル・ネイバースはこう指摘しました。

そこでマイクロインタラクションの登場です。小さなデザイン機能と些細なアニメーションの組み合わせが、ユーザー体験に大きな違いをもたらします。この記事では、サイトやアプリの、品質、有用性、特徴に対する人々の印象に、大きな影響を与えるマイクロインタラクションの使い方について、業界をリードするウェブアニメーションの専門家の意見を紹介します。

マイクロインタラクションとは何か?

「マイクロインタラクションとは、あるひとつのユースケースを解決する目的で製品に含まれる一瞬の動きです」と語るのは、Designing Interface Animationの著者で、アドビのデザインアドボケートであるヴァル・ヘッドです。「それは強い力を持ったデザインの細部であり、適切に使われれば全体的な体験を向上させます」

アニメーションを使ったフィードバック出典：Dribbble

cssanimation.rocksを運営するソフトウェア開発者のドノバン・ハッチソンは、適切に設計されたマイクロインタラクションを「小さなタスクの達成を支援し、フィードバックを通じて達成した（または達成できなかった）結果に対する理解を強化する瞬間」と定義しています。

マイクロインタラクションは、ユーザの精神的な労力、すなわち認知負荷を減らすには特に有用です。この点について、クリエイティブ開発者でウェブアニメーションに情熱的なリシ・リンハルトからのアドバイスは次のようなものです。「私たちデザイナーは、ユーザーが何をしたいのか、そして、インターフェースがどのようにユーザーがその目的を達成するのを助けるのかを考えなければなりません。その際に考慮すべき点の1つは、ユーザーが特定の目標を達成するために、どの程度自分の記憶に頼る必要があるかということです。インタフェースの別の箇所から、既に表示されなくなっているかもしれない情報を記憶していなければならない状況にユーザーはいないでしょうか？」

アニメーションによるフィードバック

マイクロインタラクションは細かいアニメーションとよく組み合わされます。レイチェルによると、その理由は、小さくて局所的な変化には「チェンジブラインドネス」として知られる現象によって、ユーザーに見逃されてしまう危険性があるからです。

「アニメーション成分を増やす、つまり、何かを生き生きと見せることで、ユーザーの視覚システムを刺激して、いま起きている変化に注意を向けられます。そのための最も効果的な方法は、要素の形状を変更させる（プラス記号からチェック記号へのモーフィングのように）、または、要素を移動させることです。しかし、簡単だからといって使いすぎてはなりません。過度になると、気を散らせる、あるいは不愉快な気分にさせることもあるかもしれません」

ヴァルはこれに付け加えて、「マイクロインタラクションは、システムの状態を示したり、パーソナリティを持たせるためにもよく使われます」と言います。具体的に例を挙げると、”画面を下向きにプルして情報をリフレッシュする動き” 、”進捗を示すインジケータ”、”アイコンのモーフィング”、”ボタンを押した際のフィードバック” などのインタラクションです。

「アニメーションはこれらの瞬間を、より表現力豊かで効果的にするのに役立ちます」とヴァルは続けます。「それがアニメーション付きのマイクロインタラクションが一般的な理由です。たとえば、ツイートにいいねをすると表示されるアニメーションは、その瞬間を、成長するハートとドットによる小さなお祝いとして演出します。Mediumの拍手のアニメーションにも同様の効果があります。記事に感謝の気持ちを送りながらフィードバックすることができます。それぞれのマイクロインタラクションで使用されるアニメーションのスタイルは、各ブランドの個性に適合しており、そのためより効果的です」

小さなアニメーションのテスト

ドノバンはこれに同意しつつ、小さなアニメーションは慎重に使用する必要があると警告します。大きな影響を与える潜在的な力を持つためです。

「突然UIが変わった時、人々は気付くかもしれません。それは、例えば、新しいコンテンツ表示したり情報を変更した場合かもしれません。変化に引き付けられているところに、点滅、フェード、揺れなどのちょっとしたアニメーションを追加することが、混乱と理解の分かれ目になり得るのです」

ドノバンが推奨するのは、アニメーションを短く保ち、的確に使うことです。アニメーションが誰かを待たせてしまっているなら、時間をかけすぎている可能性があります。一方、起きている状況に注目を集めることが目的の場合は、アニメーションに気づくための十分な長さを持たせるようにします。とにかく自分のアニメーションをテストして、正しく感じられるように調整することになるでしょう。

ヴァルも同意して、「マイクロインタラクションにおいてプロトタイピングは特に重要です。最高のものは、多くの詳細を僅かな瞬間に詰め込んでいるからです。意図した目的を効果的に伝えているかどうかを判断するのであれば、実際に試すことに勝るものはありません」と語ります。

一方、レイチェルは、ユーザーテストを使い、アニメーションが過剰だとユーザーが感じたかどうか分析することを提案します。「もし人々が積極的に『ああ、なんてかわいい動き』のようなコメントをしているとしたら、アニメーションが脳の視覚をハイジャックしていて、ユーザーの思考を妨げている可能性があります。適度な動きを感じられるスイートスポットを見つけられたなら、デザインがより速くより洗練された印象になるでしょう」

マイクロインタラクションと一貫性と認知負荷

トーマス・ポグロツキーによるツールチップのアニメーション出典：CodePen

マイクロインタラクションにアニメーションを適用する時は、それが1つの目的またはタスクに焦点を当てたものになるよう留意することが大切です。「複数のアニメーションが同時に発生していないことを確認しましょう。目的達成の妨げになる可能性があるためです」とは、ドノバンからの助言です。

リジはさらに追加して、「ユーザの認知負荷を軽減したければ、アニメーションの使い方に一貫性を持たせることが重要です。いくつかのルールをインターフェースに適用するのが良いでしょう。あまりにも多くの異なる、すなわち一貫性のないアニメーションがあると、ユーザーは、なぜ最初の要素のアニメーションと次の要素のアニメーションが異なるのか考える必要があります。その結果、頭の中での作業は増加します」

マイクロインタラクションで精神的な労力を軽減する良い案のひとつは、ユーザがタスクを完了するためにさらなる情報を必要とする時は、いつでもアニメーション付きのツールチップを提供することです。「これにより、ユーザーは十分な情報持っているのか、それとも重要な情報を忘れてしまっていてさらに説明を必要としているのかを判断できます」とリジは説明します。

マイクロインタラクションはごく小さなもので、デザインシステムやUIライブラリ用のコンポーネントにも向いています。レイチェルは次のように述べています。「ユーザーも開発者もデザイナーも、アコーディオンが開いたりツールチップが表示されることに感謝するでしょう。たとえ当人がそのことを自覚していないとしても、彼らの視覚システムは間違いなく感謝しているはずです」

この記事はAsk a UXpert: How Micro-Interactions Can Enhance the User Experience（著者:Oliver Lindbergの抄訳です