マイクロインタラクションとは？導入の際に気をつけるべき4ポイント

「マイクロインタラクション」をご存知ですか？

マイクロインタラクションとは、Webにおけるユーザーとのコミュニケーション手法のひとつ。快適に扱えるWebコンテンツには、細かなマイクロインタラクションが活用されています。

今回は、マイクロインタラクションとはどのようなものか解説し、WebサイトやモバイルアプリのUXにどのように取り入れて行くべきかをご案内します。

マイクロインタラクションとは？

アプリやWebサービスを利用するとき、ユーザーは細かなタスクを数多く行なっています。その一つひとつの瞬間に生まれる、ユーザーとサービスの小さな相互作用を「マイクロインタラクション」と呼びます。

たとえば次のようなものがあります。

• ユーザーのアクションに対するフィードバックをする
• タスクの完了を分かりやすく伝える
• 直接操作している実感をもたせる
• アクションの結果を視覚的に表示する

▲出典：Mattia Astorino / dribbble

Webサイトで行われる「見る」「読む」といった行為は、単純なタスクです。またそれは同時に、ユーザーにとって「やらなくてもいいもの」でもあります。そのような単純なタスクを魅力的に感じさせるテクニックが「マイクロインタラクション」です。

マイクロインタラクションは、さまざまなWebサイトやモバイルアプリで使われています。たとえばFacebookやInstagramのような、ずっと心地よく使えるアプリでは、ほぼすべてタスクに対して細かなマイクロインタラクションが取り入れられています。

マイクロインタラクションはユーザーの承認欲求を満たす

マイクロインタラクションを採用すべき理由、それはユーザーの承認欲求を満たせるためです。

タスクが完了するごとに視覚的・感覚的なフィードバックを与えることで、ユーザーはギフトをもらったような気分になり、「もっとコミュニケーションをとりたい！」と思うようになります。

例えばGoogleマップは、州境を越えると「新しい州に入りました」とメッセージを伝えます。Instagramではスクリーンショットを撮ると、シェアを促す通知が表示されます。このような、マイクロインタラクションによる細かなフィードバックにより、ユーザーはWebサイトやアプリに好感を持つようになるのです。

マイクロインタラクションの7つの利用タイミング

どのようなタイミングでマイクロインタラクションを使うのが良いでしょうか。

適切な場面で用いなければ、単にサイトを重くするばかりで、かえってユーザーにストレスを与えてしまい、UXを低下させます。

ここからはマイクロインタラクションを実装すべきおすすめの利用タイミングを7つご紹介します。

1. プロセス進行状況を提示する

アプリ内で何らかのプロセスが進行中であるばあい、ユーザーにその進行状況を知らせるのとても大切です。

特に、プロセスに少し時間がかかってしまうばあいは、必ずステータスを表示しましょう。

たとえば、データのダウンロード / アップロード画面では以下のような表示が考えられます。

▲出典：xjw / dribbble

もしくは、進行状況をスクロール方式で表示するのも良いでしょう。

ポイント：ユーザーを退屈させないこと。多くの情報を表示た上で、現在の進行状況も分かりやすく表示しましょう。ローディングバーは、ユーザーの注意を引きやすく混乱も防げます。

2. 変化を通知する

何かしらの変更が発生した際には、通知機能を使いましょう。

たとえば新着メールが届いた時など、ユーザーが情報を見逃してしまうのを防ぐのに活用できます。

▲出典：Russ Rosenberg / dribbble

ポイント：インタラクティブな要素以外はシンプルに。アニメーションエフェクトはユーザーに大事な通知をする時だけ使いましょう。

3. 前後関係をわかりやすくする

モーションを使って情報の前後関係（階層関係）を明確化し、スムーズなナビゲーションを心がけましょう。

特にモバイル機器やスマートウォッチでは、小さい画面で表示できる情報量には限界があります。モーションを使って情報の階層をあらわすことで、使いやすいインターフェイスを実現できるでしょう。

ポイント：異なるページ間を移動する際、クリアーなナビゲーションを使って「何がどこから出てきたのか」をはっきりさせましょう。またインタラクションのテーマを統一し、サイト全体の一体感を向上させUXを改善できます。

4. 入力を可視化する

データ入力は多くのアプリで行われます。

マイクロインタラクションを使うことで、このプロセスを特別なものにしてみましょう。

▲Ramakrishna V / dribbble

ポイント： ユーザーが入力した情報をクリエイティブに表示し、ユーザーのタスク完了を補助しましょう。

5. CTA（行動喚起）

マイクロインタラクションには、感情に訴えかけてユーザー行動を喚起する力があります。行動換気をスムーズに行うため、適切なアニメーションを取り入れましょう。

100回繰り返し見ても気に障らないような、控えめかつクレバーなデザインを心がけましょう。

ポイント： 「このマイクロインタラクションはユーザーにどのような感情を与えるのか」ユーザーの感情を常に先回りして予測しましょう。飽きのこない、繰り返し使えるデザインであることも大切です。

6. アクションに対するフィードバックを提示する

「アクションを受け取りましたよ」というフィードバックを可視化することで、ユーザーとサービス双方向のコミュニケーションが成立します。

たとえば音楽アプリなら、「曲を変える」「曲をスキップする」のようなアクションに対してもマイクロインタラクションを追加するチャンスです。ユーザーがボタンを押した際に、そのボタンが””凹んだジェスチャー””を見せれば、「指示を受け取りました」というコミュニケーションに繋がるのです。

7. タスクが完了したことを知らせる

設定を変更する、カートへ商品を追加する、オンオフを切り替える、何かを共有する、デバイスを接続する等……。

このようなアクションに対して、マイクロインタラクションは効果的に働きます。

マイクロインタラクションは、ユーザーの行動をサポートする方法でもあります。フィードバックや行動の結果を提供し、ユーザーの操作を助けています。

マイクロインタラクションをデザインする4つのポイント

最後に、どのようにマイクロインタラクションをデザインすべきか、基本的な4つのポイントをご紹介します。

1. シンプルにデザインしよう

シンプルなデザインを心がけてください。マイクロインタラクションが複雑だと、ユーザーの混乱を招きます。

またマイクロインタラクションを導入するばあいは、その分多くのデータ通信が必要になります。Googleは2018年7月に「読み込み速度の遅いページの検索ランクを下げる」と発表していることからも、極端に重いマイクロインタラクションは極力避けるべきでしょう。

一方で、単に淡々としたマイクロインタラクションを取り入れるのではなく、そのマイクロインタラクションがユーザーにどのような価値と意味を与えられるのかよく考えましょう。価値と意味が固まってから、デザインを始めてください。

2. デザインの一貫性を守ろう

マイクロインタラクションはユーザーを喜ばせるものですが、一方で主張しすぎないことも大事です。アプリのスタンスをはっきりさせれば、それに沿ったコミュニケーションのとり方が見えてくるはずです。

たとえば、Webサイトやアプリのカラーパレットがあるならそれを活用し、テーマがあるならテーマに沿って制作しましょう。マイクロインタラクションとコピーを組み合わせて、一貫性を保つことでより効果的に機能します。

3. ユーザーの目的を優先しよう

マイクロインタラクションは、ユーザー体験を楽しくデザインするために必要です。一方で、それが「ユーザーの目的に沿っているか」を忘れてはいけません。

デザインの見た目を優先させると、UXが低下することもあります。マイクロインタラクションがユーザーに不快感を与えていないか、注意深く観察しましょう。

4. プロトタイプを作成しよう

あなたがどんなに良いアイデアを持っていたとしても、ユーザーに伝わらなければ意味がありません。

プロトタイプを作成して、マイクロインタラクションがユーザーに正しく伝わるものであるか、テストを繰り返しましょう。

まとめ

マイクロインタラクションは、ユーザー体験を向上させる有効なコミュニケーション手法です。そしてそれは、Webサイトやアプリの利用を快適で魅力的なものにすると同時に、ユーザーに不快感を与える可能性もあるものです。

マイクロインタラクションのデザインで最も大切なポイントは、あくまでユーザー体験を向上させるためにそれを取り入れるべきであるということ。ユーザーがWebサイトやアプリを使うシーンを常に考えながら、最適なデザインを心がけましょう。

（執筆協力：Yuri Tanaka, Juri Ando　参考 The beginner’s guide to mobile microinteractions / Microinteractions: The Secret of Great App Design）

こちらもおすすめ！▼