「マイクロインタラクション」という言葉を聞いたことがあるでしょうか？マイクロインタラクションとは、近年のWebサイトやアプリケーションの制作において非常に重要とされているキーワードの一つです。閲覧および利用しやすいWebサイトやアプリケーションを作成したり、Webサイトやアプリケーションの離脱率を下げるためには必要不可欠となっています。
この記事では、マイクロインタラクションの基礎から応用まで網羅的に解説していきます。また、「効果的なマイクロインタラクションとは一体何か」をテーマに詳しく解説します。
マイクロインタラクションとは
- ユーザー体験（UX）のために使われる
マイクロインタラクションとは、ユーザー体験を意味する「UX（ User Experience：ユーザーエキスペリエンス）の改善のために使われる手法の一つです。ユーザーがWebサイトとインタラクションを行う際に、ユーザーが行う操作に対してWebサイト側はポジティブなフィードバックを与えます。すると、ユーザーはWebサイト上であらゆる操作が実行できるようになります。これらのフィードバックは基本的に「自然で直感的なもの」かつ、ユーザーがWebサイト上での動きの一部のように感じるものでなくてはならないのです。
近年では、パソコンやスマートフォン、タブレットなどの携帯デバイス、家電製品、アプリケーションなど、日常におけるどんなシーンでもマイクロインタラクションが用いられています。
【マイクロインタラクションの例】
・設定の変更
・データやデバイスの同期
・アラームの設定
・ログイン
・『いいね』や『お気に入り』
- マイクロインタラクションのメリット
【使いやすさが向上する】
マイクロインタラクションを導入することで、導入したもの自体が使いやすくなります。身近なマイクロインタラクションを例に挙げると、ユーザーがスマートフォンのアプリケーションのボタンをタップし、 ボタンがナビゲージョンをプルダウンするという動きにおいては、ユーザー自身が行なった操作によって何が起こったのかが視覚的に分かるようになります。さらに、マイクロインタラクションは指示した動作が終了したのかどうかや、一つ前のコンテンツがまだ有効なのかなど、アプリケーションとそれに関わるインターフェイスについてまで理解してもらいやすくなります。
【Webサイトのブランディングが可能】
マイクロインタラクションを導入することで、Webサイトやアプリケーション全体のユーザー体験が向上し、それ自体がより良いブランディングに繋がります。さらに、Webサイトやアプリケーションの使用経験でよりシームレス化が可能となり、ブランディングにも繋がります。
【ユーザーにフィードバックを与える】
マイクロインタラクションが導入されていることで、ユーザーが何かアクションを起こした際にフィードバックを提供することができます。
例えば、ユーザーが何かを投稿すると送信ボタンがローダーに変わり、送信が成功または失敗した旨を伝えるメッセージが表示されます。この一連の操作の中には、2つのフィードバックが行われています。1つは、「ユーザーが何かを投稿すると送信ボタンがローダーに変わる」というフィードバックです。このフィードバックでは、ユーザーが投稿したものが処理されているということを示します。2つ目は、「送信が成功または失敗した旨を伝えるメッセージが表示される」というフィードバックです。このフィードバックでは、ユーザーの投稿が成功したかどうかを知らせます。
【ユーザーにコントロール感を与える】
ユーザーが何か操作をしてもフィードバックがなかったり、次の操作が完了するまで何もフィードバックがなかったりする状況は、あまり好ましくないユーザー体験であると言えます。フィードバックが全くない状態であると、ユーザーはWebサイトやアプリケーションをコントロールしている感覚を得られず、そのWebサイトやアプリケーションを使用することにストレスを感じてしまう恐れがあります。
マイクロインタラクションの基本的な効果
- マイクロインタラクションの4つの基本効果
【トリガー】
マイクロインタラクションの「きっかけ」となる要素を指します。
【ルール】
クリックやタップ、スワイプ、プルなど、ユーザーが行う操作にマイクロインタラクションを適応させることを指します。
【フィードバック】
アニメーションやポップアップなどを使って、ユーザーに対して「何が起きたのか（起きているのか）」を知らせることを指します。
【ループ/モード】
マイクロインタラクションの「長さ」を決める要素を指します。マイクロインタラクションをリピートさせるのか、時間と共に変化させるのかなどを選択します。
- マイクロインタラクションの実例
【設定の調整】
ユーザーがWebサイトやアプリケーションで、音量や画面の明るさなどを調節する際にアニメーションが組み込まれることがあります。ユーザーが設定を調節するのと同時にアニメーションが動くことは、ユーザーにとってわかりやすいフィードバックとなります。
【メッセージやコメント】
メッセージやコメントは、それ自体がユーザーへのフィードバックかつマイクロインタラクションとなります。マイクロインタラクションの中でも最もダイレクトなフィードバックであるとも言えるため、反応がなかったり不親切であったりすることは避けなければなりません。
【ステータスバー】
何かをアップロードしたりダウンロードをしたりすることがあった場合、「処理は進行しているのか」「処理が完了したのかどうか」をユーザーに知らせることが良質なフィードバックであるといえます。そのために、「読み込み中（loading）」や「完了（success）」などのステータスバーを使うことで、より良いユーザー体験を与えることができます。
【通知】
Webサイトやアプリケーションにアニメーション通知を導入することで、効果的なマイクロインタラクションが期待できます。魅力的な通知アニメーションであれば、ユーザーの注目を集めて確認する必要があるということを伝えることができます。
【プルダウン】
スマートフォンなどの画面が小さいデバイスでは、複数の情報を与えるためにはページの移動が必要となります。Webサイトやアプリケーション上でプルダウンメニューを用意することで、ユーザー自身が今どのページにいるのかをすぐに把握することができます。
【ページの読み込み】
ページの読み込みに時間を要する場合、ページの読み込み中であることをマイクロインタラクションでユーザーに伝えます。ページが読み込み中であることがユーザーに伝わらなければ、ユーザーはWebサイトやアプリケーションから離脱してしまう確率が高くなってしまいます。ページの読み込み中であることを伝え、さらに読み込みが完了したことを通知できれば、ユーザーの離脱率は下がるでしょう。
【入力内容を可視化する】
ユーザーがWebサイトやアプリケーションに何かデータを入力する必要がある際、ユーザーの多くはその入力内容を確認したいと望んでいます。入力した内容が見えるようにすることで、ユーザーは正しい情報を入力したことが明確になり、良いマイクロインタラクションの効果が得られます。また、入力内容が見えることでユーザーとWebサイトあるいはアプリケーション間の信頼関係を築くことができます。
【分かりやすいコールトゥアクション】
ユーザーにとって分かりやすく目障りにならないマイクロインタラクションは、コールトゥアクションを促すのに効果的であると言えます。魅力的なアニメーションなどを使って、ユーザーがクリックしたくなるようなマイクロインタラクションを作りましょう。
効果的なマイクロインタラクションとは？
- マイクロインタラクションのポイント
【常にステータスを伝える】
マイクロインタラクションでは、Webサイトやアプリケーション上で「何が起こっているのかを常に明示する」ということが大切であるとされています。これは、操作を行なったユーザーが「ページがあとどれくらいで読み込まれるのか」「アップロードまでにどれくらいの時間がかかるのか」など、今の状況を把握するために必要です。例えば、読み込み中の背景を変えたり、プログレスバーで進行状況を伝えたり、音楽や効果音を流すなどのマイクロインタラクションが考えられます。ただし、これらは「ユーザーを退屈にさせない」ということに重きを置くことがポイントです。無機質なアニメーションではなく、人間やキャラクターをモチーフとしたアニメーションを使うなどしてユーザーを退屈させない工夫をすることで、万が一処理に失敗した際のユーザーのストレスを軽減することが期待できます。
【アニメーションやハイライトを使う】
マイクロインタラクションでは、Webサイトやアプリケーション側の「変化のきっかけ」を知らせることが大切であるとされています。これは、操作を行うユーザーに対して「そのボタンを押せば他のメニューが出てくる」ということを瞬時に知らせる効果があります。押してからようやく何が行われるのかが分かるボタンや、押すべきかどうか分からないボタンはユーザーにとってストレスとなります。例えば、ツールチップでボタンが押されたあとのアクションを表示したり、アニメーションでボタンの場所を知らせたり、マウスホバーで色がかわったりなどのマイクロインタラクションが効果的です。
【コンテクストを保持する】
マイクロインタラクションでは、「直前の動作を保持したまま次のページでも詳細情報をユーザーに表示させる」ことが効果的であるとされています。スマートフォンなどのデバイスは画面が小さいため、一つの画面に沢山の情報を詰め込むことが難しいとされています。そのため、複数の情報を複数のページに渡ってユーザーに明示する必要があり、そうすると直前の情報を忘れられてしまうという事例が多く見られます。そこで大切なのが、「アニメーションを効果的に使う」ということです。ページ移動の際にアニメーションを効果的に使うことで、小さな画面のデバイスであっても直前の動作を保持したまま次のページへ移動できるため、ユーザーが直前の動作を忘れてしまうということを防ぐことができます。
【ユーザーのアクションを引き出す】
効果的なマイクロインタラクションを導入することで、「ユーザーにコミュニケーションを取ることを促す」ことが可能になります。マイクロインタラクションではこのアクションのことを、「コールトゥアクション（Calls-to-action）」と呼びます。ユーザーのコミュニケーションを促すことで、Webサイトの閲覧を続けさせたり、サイト内を回覧させたり、投稿に対して「いいね」を押したり、シェアをしたりなどの行動を起こさせます。
【チュートリアルを設ける】
Webサイトやアプリケーションにおいて、ユーザーが実際に使用する前にチュートリアルを設けることは、マイクロインタラクションの手法の一つとして使われています。魅力的なアニメーションを使って基本的な機能を紹介することで、ユーザーの取るべき行動が明らかになる上に、チュートリアルを見ることでWebサイトやアプリケーションそのものに好感を持ってくれるようになり、Webサイトの離脱やアプリケーションのアンインストールを防ぐ効果があります。
- マイクロインタラクションの注意点
【目的に沿っているか考える】
マイクロインタラクションは、「なくてはならない存在」でなければ基本的には導入する必要はありません。そのマイクロインタラクションがなぜなくてはならないのか、目的に沿っているかどうかを必ず検証しましょう。間違っても、デザインのためにマイクロインタラクションを導入することはないようにします。
【デザインはシンプルなものにする】
より良いユーザー体験を与えるためのマイクロインタラクションであるにも関わらず、マイクロインタラクションそのもののデザインが複雑であるとユーザーの混乱を招く恐れがあります。また、マイクロインタラクションの表示にはデータの通信も発生するため、できる限り通信量を節約する必要があります。
【一貫性を保つ】
マイクロインタラクションはより良いユーザー体験を与える必要があるものの、決してそれ自体が主役になることはありません。Webサイトやアプリケーションにテーマがあれば、マイクロインタラクションもそのテーマに合わせて制作する必要があります。
【デモンストレーションをする】
マイクロインタラクションは、制作者のエゴとなってはなりません。自分自身は良いアイディアだと思っていても、他の人に伝えなければなりません。その為には、テスト・リセット・再テストを繰り返し、良いユーザー体験を与えられるかデモンストレーションする必要があります。
有名サイトのマイクロインタラクションを紹介！
- Slack
Slackの機能の一つとして、「絵文字」があります。Slackでは使用したい絵文字を検索できるのですが、探している絵文字やそれに近いものが存在しない場合「泣き顔」の絵文字が表示されるようになっています。これは、対象となる絵文字が存在しないということを泣き顔の絵文字でユーザーに表現するという、とてもユニークなマイクロインタラクションです。
- Google翻訳
Google翻訳には、「聴く」のボタンを押すと英文を読み上げてくれる機能があります。その機能で「聴く」のボタンを2回押すと、1回目よりもゆっくりと読み上げてくれます。これは、Google翻訳が1回目の読み上げで聴き取れなかったのだろうと予測してくれるマイクロインタラクションです。
- Googleマップ
Googleマップは、使用する時間が遅くなるにつれて背景が少しずつ「黒」に変わっていきます。これを「ナイトモード」といいます。このナイトモードは、視界と安全性を考慮し、Googleマップが自動で調節しているマイクロインタラクションです。
マイクロインタラクションの作り方
- 絵コンテの作成・共有
絵コンテや参考事例を元に、制作したいマイクロインタラクションのアイディアを共有します。デザイナーによるラフスケッチや参考動画などで、マイクロインタラクションの変化のタイミングやきっかけとなる操作について共有します。
- アニメーションツールで再現
Adobe AnimateやAfter Effectsなどのアニメーションツールを使って、マイクロインタラクションのアニメーションを再現します。ここで複雑な動きの確認や、過剰なアニメーションにならないかどうかを確認します。
- コードを書いて実装
絵コンテやアニメーションツールでのテストが完了したら、コードを作成し実装に向けます。実装後もアニメーションのテストを行い、問題なければリリースを完了します。
おわりに
マイクロインタラクションはそれ自体が主役になるのではなく、あくまでWebサイトやアプリケーションにおけるユーザー体験を「より良くするもの」であると考えましょう。デザインの為や流行っているから何となくなど、安易な動機で導入したマイクロインタラクションはかえってユーザーのストレスになることもあります。マイクロインタラクションが「なくてはならない理由」を考え、不要なマイクロインタラクションは排除しましょう。
