マイクロインタラクションは、どうして優れた製品に不可欠なものとなったのでしょうか？
ユーザー・エクスペリエンス・デザインの世界は急速に発展しており、誰もがユーザーに最高の体験をしてもらいたいと願っています。ペルソナの定義、適切に構造化された情報アーキテクチャ、熟考されたコンテンツなど、ユーザーエクスペリエンスを向上させる方法は数多くあります。しかし、ハイレベルな構造を定義した後、より細かいインタラクションデザインを行うことが、ユーザーを感動させることにつながります。
私たち消費者は、知らず知らずのうちに、このようなマイクロインタラクションを日常的に目にしているのです。
マイクロインタラクションとは？
マイクロインタラクションとは、視覚的なフィードバックを与えたり、変化をより明確に表示したりすることでユーザーをサポートする、小さくてできれば機能的なアニメーションのことです。
マイクロインタラクションを使えば、言葉を使わずに多くのことを説明することが可能です。
マイクロインタラクションは多数のデジタル要素を含みますが、すべての要素がマイクロインタラクションの一部であるわけではありません。スクリーン上に常に存在する静的な要素は、明確なトリガーがないため、マイクロインタラクションではありません。また、複数のアクションで構成されるフローもマイクロインタラクションではありません。マイクロインタラクションには、ユーザートリガー型とシステムトリガー型の2種類があります。
マイクロインタラクションの例
1.スクロールバー
ページ内の位置を変更するユーザーに対して視覚的なフィードバックを与えます（ユーザートリガー）。
2.プルトゥリフレッシュアニメーション
ユーザーの操作に対するビジュアルフィードバックを提供します（ユーザートリガー）
3. スワイプアニメーション
ユーザーが要素をスワイプしたことを視覚的にフィードバックします（ユーザートリガー）。
4. デジタルアラーム
時間条件が満たされたことを聴覚的（および視覚的）フィードバックを送ります（システムトリガー）。
5. 通知
新しい通知が到着したことをユーザーにフィードバックします（システムトリガー）。
アニメーションで感情を動かす :)
アニメーション要素は、スペースを取ることを念頭に置くことが重要です。そのため、アニメーションを重要視する必要があります。つまり、アニメーションは、視聴者を感動させたり、視覚的な魅力を加えたりするためではなく、機能を補完する場合にのみ使用する必要があります。
しかし、アニメーションを多用すると、階層が平坦になるだけなので注意が必要です。伝えるべきメッセージが弱くなってしまうのです。
ここでは、アニメーションの賢い使い方をいくつか紹介します。
1. ローディング画面の退屈を解消する
ユーザーは、ウェブサイトやアプリがロードされるのを2秒でも待ちたがります。1秒でも遅れると、多くの人がより高速なリソースに移動してしまいます。ローディング画面のアニメーションは、サイトやアプリにコンテンツが表示されるのを待つ間、ユーザーを楽しませ、興味を持たせることができるのです。
2. ユーザーに手がかりを与える
デザイナーは、サイトやアプリで何ができるかをユーザーに伝えるために、アニメーションを使用することができます。例えば、通知のリストを突然表示するのではなく、画面上に表示されたときにスライドアップさせることで、もっと見たい場合は上にスライドできることをユーザーに伝えます。
3. リアルタイムのビジュアルフィードバックを提供する
アプリやWebサイト上でユーザーが行う操作に対して、即座に視覚的なフィードバックが得られるようなアニメーション要素を取り入れると、混乱を防ぐことができます。例えば、ボタンをクリックしたり押したりすると、色が変わったり光ったりするようにします。
マイクロインタラクションデザインのベストプラクティス
マイクロインタラクションの用途を定義し、説明し、それがどのようにユーザー体験を向上させるかの例を示したので、マイクロインタラクションを作成するためのベストプラクティスを説明しましょう。
ユーザーの問題を特定し理解する
ユーザーエクスペリエンスデザインの黄金律は、ユーザーの問題を明らかにし、理解することです。ユーザーのニーズを理解する最善の方法は、アンケートやインタビューを実施したり、ユーザーリサーチを通じて行動を観察することです。
マイクロインタラクションを自然に保つ
ゴールは、直感的で自然に感じられる方法で、ユーザーと製品の間のギャップを埋めることです。読み込みに時間がかかったり、ユーザーの注意をそらすような奇妙なアニメーションは避け、製品とのシームレスなフローを実現するデザインを目指しましょう。
ユーザーから得た知見をテストし、反復する
経験豊富なデザイナーであっても、一度で完璧なデザインができることは稀です。だからこそ、ユーザーテストと反復設計のプロセスを用いることが、製品発売前にユーザビリティの欠陥を減らす簡単な方法なのです。
ユーザーテストの段階では、マイクロインタラクションの使い勝手をテスト・分析し、次の設計段階で修正します。このプロセスは、ユーザビリティの問題やペインポイントが修正されるまで繰り返されます。
変化とコンテクストの明確化
特に小さな画面とフラットなデザインでは、必要な情報をすべて表示するのは至難の業です。そのため、時には要素を隠すこともあります。例えば、ナビゲーションの方法を明確にするために、マイクロアニメーションが解決策となることがあります。
例えば、ハンバーガーメニューについて考えましょう。アニメーションなしで展開されると、どこから来たのかがよく分からなくなります。アニメーションを用いてコンテクストを提供し、ユーザーが迷子にならないようにしましょう。
ハンバーガーメニューのアイコンを同時に変化させ、メニューを開くようにすれば、ユーザーがもう一度クリックしたときにどのような動作をするかを即座に示すことができるのです。
階層とフォーカス
マイクロアニメーションを使用する重要な理由のひとつに、フォーカスを作るということがあります。動くものは、注目を集めます。そこで、特定の要素をアニメーション化することで、注目を集めることができます。これは、オンボーディング・モーメントに非常に有効です。ユーザーがページ上でアクションを開始するためにクリックしたいボタンを強調します。
特定のコンテキストにのみ関連するメニューアイテムは、ユーザーがそれを使用したいと思う瞬間に、その存在をさりげなく通知することができます。
また、ユーザーがあるセクションを閉じたとき、そのセクションがどこにあるのかをアニメーションで明示することもできます。例えば、共有オプションを考えてみましょう。記事を共有しようと思う前に、Twitter、Facebook、LinkedInで共有するかどうかは考えないかもしれません。しかし、「共有」ボタンをクリックしたり、カーソルを合わせたりしたあとは、このことが重要になります。
ブランド体験
アニメーションは、ブランド体験を強化する方法として有効です。マイクロアニメーションを導入することで、デザインはより個性的になります。
美しい例として、Googleのロゴがあります。Googleは、音声認識ツールにドットを使用しています。この4つのドットを使って、「待つ」「聞く」「処理する」「答える」という異なるステータスを伝えているのです。
マイクロインタラクションの構造に従う
- トリガー：トリガーはマイクロインタラクションを開始させる。トリガーは、ユーザーによって開始されるものと、システムによって開始されるものがある。ユーザが開始するトリガでは、ユーザはアクションを開始しなければならない。システム起動トリガーでは、ソフトウェアが特定の条件が満たされていることを検出し、アクションを開始します。
- ルール：ルールは、マイクロインタラクションがトリガーにどのように反応するかを決定し、インタラクションの間に何が起こるかを定義します。例えば、懐中電灯のアプリは、ライトをオン・オフするトリガーとしてボタンを使用します。
- フィードバック：フィードバックは、マイクロインタラクションの間に何が起こっているかをユーザーに知らせます。フィードバックの例として、インラインバリデーションを備えたサインアップフォームがあります。フィールドの入力に誤りがある場合は枠線が緑色に変わり、何か誤りがある場合は赤色に変わります。このように、ユーザーは正しいか間違っているかを即座に知ることができます。
- ループとモード：ループとモードは、マイクロインタラクションのメタルールを定義し、繰り返し使用されたときにマイクロインタラクションがどのように変化するかを定義します。例えば、eコマースでは、「すぐに購入する」ボタンは、ユーザーが以前にそのアイテムを購入したことがある場合、「もう一度購入する」に変わるかもしれません。
まとめ
うまく設計されたマイクロインタラクションは、ユーザーエクスペリエンスに大きなインパクトを与えることができます。マイクロインタラクションは、システムの状態を視覚的にフィードバックしたり、ユーザーがエラーを防ぐのに役立ちます。さらに、これらの小さなディテールが、良い製品を素晴らしい製品に変え、離脱したユーザーをエンゲージド・ユーザーに変えることができるのです。
