近年さまざまなサービスやツールが乱立し、機能面だけでなくそれらの利用を通して得られる体験「ユーザーエクスペリエンス（UX）」が重視される傾向にあります。UXを考えるうえで1つの指標となるのがマイクロインタラクションです。たとえば、SNSの「いいね」ボタンを押すと赤くなるなどのユーザーのアクションによる反応もその1つです。デザイン歴が長いUI/UXデザイナーの中にも、「他と差別化するにはどうすべきか」「使いやすく楽しめるマイクロインタラクションとはどんなものか」と悩んでいる方もいるでしょう。

マイクロインタラクションを向上させるための手っ取り早い方法は明快であり、周囲からフィードバックをもらうことが大切です。マイクロインタラクションの質を高めるフィードバックの重要性と、ユーザー視点に立つことの大切さを解説します。

ないと困る？マイクロインタラクションの役割や効果

マイクロインストラクション_エレベーター

一般の人にとっては、マイクロインタラクションと聞いてもピンとくることはありません。しかし、マイクロインタラクションはアナログ・デジタルを問わず利用されており、日常に自然な形で溶け込んでいます。まずはマイクロインタラクションの概要と役割や効果について解説します。

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

マイクロインタラクションとは、ユーザーのアクションによって反応するインタラクションデザインの1つです。現代社会におけるさまざまな物やサービスに利用され、日常生活の中に溶け込んでいます。たとえば、信号機やエレベーターのボタンを押したら点灯する、レンジのボタンを押すと音が鳴る、これらも狭義ではマイクロインタラクションです。
マイクロインタラクションは以下のように4つの要素で構成されています。

【マイクロインタラクションを構成する4つの要素】

  • 1.トリガー：ユーザーのアクション
  • 2.ルール：ユーザーが起こしたアクションで何が起きるか
  • 3.フィードバック：トリガーの成否をユーザーに伝える
  • 4.ループとモード：ループの条件やモードの切り替え、メタルール

たとえばSNSで友人の投稿が気に入った場合、「いいね」を押すことでしょう。これがトリガーとなり相手に通知が届く（ルール）、さらにハートの色がピンクになる（フィードバック）といった動作をするのがマイクロインタラクションの仕組みです。

マイクロインタラクションの意味

なぜ人が使うツールにマイクロインタラクションが用いられているのでしょうか。その理由は簡潔に言うと、「ユーザーのミスを防ぎ、利便性を高めて安心感を与えるため」です。

たとえば、エレベーターで降りる階のボタンを押したのに光らなかったら、「本当に押せたのだろうか」「止まってくれるだろうか」と不便さを感じるはずです。SNSでも「いいね」ボタンのハートが赤くならなかったら「私の気持ちは相手に伝わったのだろうか」と不安を感じるかもしれません。

マイクロインタラクションがもたらす効果

マイクロインタラクションがもたらす効果にはさまざまなものがあります。

【マイクロインタラクションの主な効果】

  • 直感的に使い方を理解できる
  • ツールに愛着が湧き長く使ってもらえる
  • 使いやすさを感じ人にすすめてもらえる

優れたマイクロインタラクションであれば、直感的に使い方を理解できる仕組みになっています。説明書を読む手間が省けるため、ユーザーも気楽に利用できるでしょう。また、面白い動きやクセになるマイクロインタラクションがあれば、愛着を持ってもらいやすく、長くサービスを利用してもらえるようになります。
さらに、使いやすく楽しいツールであるとして、人にオススメしててもらえるかもしれません。

マイクロインタラクションの肝はフィードバックとUX視点

マイクロインストラクション_UX視点

マイクロインタラクションはさまざまなツールやサービスで、なくてはならない存在です。あらゆるものに使われているからこそ、ユーザーに快適に使用してもらえるだけの質の高さが求められます。マイクロインタラクションの質を高めるために必要なフィードバックやユーザー視点について解説します。

できる限り多くの人にフィードバックをもらう

世の中のさまざまな仕事に共通して言えることですが、Webサイトのマイクロインタラクションでクオリティを高めるためには、多くの人からフィードバックをもらうことが大切です。自分1人の感性では限界がありますし、作成者本人としての先入観もあります。
客観的に評価してもらうためにはチームの同僚はもちろん、Webデザイナーやアートディレクターなど、幅広い人から率直な意見をもらうようにしましょう。自分では気がつけないような指摘を受けることもあり、それを聞き入れデザインに取り入れれば、高いクオリティを生み出せることもあります。

UX視点を持つことが大切

マイクロインタラクションではUX視点を持つことが大切です。最終的にWebサイトを利用するのはユーザーです。ユーザーたちは「Webサイトの仕様はもちろん、そもそもツールに関する知識はない素人である」ということを意識しましょう。また、「ユーザーがどうしてそのWebサイトを利用するのか」「利用の邪魔をしないデザインであるか」なども意識すると良いでしょう。そうした視点を持てば、初めて利用しても直感的に分かる、楽しい、中毒性がある、そんなマイクロインタラクションに仕上がっているかどうかチェックできるはずです。

ユーザーの「分かりやすい」「使いやすい」が重要

マイクロインストラクション_SNSの反響

マイクロインタラクションをデザインするにあたって、ユーザー視点を持つことは大前提です。そのうえで、「分かりやすくデザインされている」ことが重要になります。初めて利用するユーザーでも視覚的に判断でき、マニュアルやヘルプ画面を見なくても使用できるのがポイントです。どんなユーザーでも、すぐにわかる直感的なデザインが求められますが、それらを意識するうえでは具体的にどんなことに気をつけるべきでしょうか。意識すべき3点を紹介します。

その1：誰でも簡単・分かりやすいことが大切

マイクロインタラクションはシンプルであることが基本です。デザインありきで複雑さのあるものでは、ユーザーが混乱してしまい継続して利用する気が薄れてしまうためです。また、テキストのみのデザインと比べれば、マイクロインタラクションを導入している方がデータ通信量も増えます。Webはスマホで利用するユーザーが圧倒的に多いことを考えた場合、利便性の面から複雑なデザインは避けるべきと言えるでしょう。マニュアルやヘルプ画面を見なくても、誰でも簡単に使えて分かりやすい、その基本を押さえたうえでデザインを心がけましょう。

その2：やりすぎの演出は避ける

マイクロインタラクションは利便性とともに、ユーザーに楽しさを与える効果があります。しかし、演出に凝りすぎてしまうとユーザーはストレスを感じてしまうこともあるでしょう。たとえば、SNSで「いいね」ボタンを押しただけで、毎回ド派手な演出がされたらどう感じるでしょうか。最初のうちは意外性もあって見栄えも良いため楽しいかもしれません。しかし、時間とともに慣れや飽きがきて、派手な演出に疲れてしまうかもしれません。そして、面倒になり、そのSNSの利用をやめてしまう恐れもあります。
予想外の動作・意外性などは演出として悪い手ではありません。しかし、やりすぎてしまえば、ユーザー離れを招くことにつながりますので注意が必要です。

その3:楽しさ・喜び・うれしさが得られるデザインを

マイクロインタラクションは機能面だけでなく、利用を通して感情が揺さぶられるような体験ができることを意識しましょう。たとえば、有名人のSNSに「いいね」を押して喜びを感じたり、有名人に対して親近感を持ったりといった経験をしたことがある人は多いことでしょう。
また、何度も同じ操作をしてきたことで「○○回のタスク完了」「マイルストーン獲得」のようなフィードバックがあると、ユーザーは承認欲求が満たされます。そして愛着が湧き、継続利用をしてくれやすくなるのです。このように、マイクロインタラクションはユーザーにちょっとしたうれしい体験を与えられるように意識することも大切です。

マイクロインタラクションはユーザー視点での使用感を大切にする

マイクロインストラクション_まとめ

【UX マイクロインタラクションについてのまとめ】

  • マイクロインタラクションはさまざまなツール・サービスになくてはならない存在
  • フィードバックとユーザー視点がマイクロインタラクションの質を高める
  • 直感的に使えてユーザーが楽しさや満足感を体験できるデザインを意識する

マイクロインタラクションはWebデザインにおいて、優先度の低いアクションと認識されがちです。それはマイクロインタラクションの基本が「ユーザーのアクションに対する、+αのリアクション」であるからというのが一因だと考えられます。しかし、マイクロインタラクションはユーザーが直感的で簡単にサービスを利用するためのサポートをしてくれます。さらに、マイクロインタラクションが優れていればユーザーは自然と楽しさや利便性を感じ、サービスを使い続けてくれるようになるかもしれません。

ユーザーの満足度を高めるためにも、マイクロインタラクションをデザインする際は、チーム内で積極的にフィードバックし合いましょう。そして、ユーザーの気持ちや利用シーンを想像して、使用感の良さを追求することが大切です。