UI/UXのニュートレンド、マイクロインタラクションとは

【この記事の要約】

マイクロインタラクションとは、Webサイトやアプリ上でのユーザーの些細なアクションに対する、細やかなフィードバックのことです。例えば、ボタンをクリックした時の色の変化や、フォーム入力完了時に表示されるチェックマークなどがこれにあたります。

これら一つ一つは小さな要素ですが、ユーザーに「操作が正しく伝わった」という安心感を与え、心地よいUX（ユーザーエクスペリエンス）を生み出す上で非常に重要な役割を果たします。優れたマイクロインタラクションは、ユーザーの操作を楽しく、分かりやすく導き、ブランドへの愛着を育みます。機能性だけでなく、細部へのこだわりが、ユーザーの満足度を大きく左右するのです。

 

【よくある質問と回答】

Q1. なぜマイクロインタラクションが、UXにおいて重要なのでしょうか？
A1. ユーザーに「手応え」と「安心感」を与えるからです。現実世界では、スイッチを押せば「カチッ」と音がしますが、デジタルの世界ではそうしたフィードバックがありません。マイクロインタラクションは、このデジタルの世界に物理的な手応えを与え、ユーザーが「自分の操作がシステムに確かに伝わった」と理解するのを助け、ストレスなく操作を続けられるようにします。

 

Q2. マイクロインタラクションの具体例を教えてください。
A2. 様々な例があります。例えば、SNSで「いいね！」ボタンを押した時にハートが弾けるアニメーション、パスワード入力欄で文字が「●」に隠れる動き、ページの最下部までスクロールすると「トップへ戻る」ボタンがフワッと現れる、といったものが代表的です。

 

Q3. 良いマイクロインタラクションを設計する上での注意点は何ですか？
A3. 過度な演出は避けるべきです。マイクロインタラクションは、あくまでユーザーの操作を補助するための「脇役」です。アニメーションが長すぎたり、派手すぎたりすると、かえってユーザーの操作を邪魔し、ストレスの原因になります。さりげなく、かつ的確にフィードバックを返す、「控えめさ」が重要です。

 

【ここから本文】

マイクロインタラクションとはインタラクションデザインの一つで、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのことです。

UI/UXを高める手法として、ユーザーとのコミュニケーションを豊かにするインタラクションデザインが存在します。
昨今ではインタラクションデザインの微細な領域が「マイクロインタラクション」と呼ばれ、注目されはじめているのをご存じでしょうか。

今回は、マイクロインタラクションの優れた例や重要性についてお話します。

 

【関連記事】

論理的！生物学的！頭脳派デザイナーによる「インタラクションデザイン」

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

マイクロインタラクションとはインタラクションデザインの一つで、Dan　Saffer氏は自身の書籍「マイクロインタラクション－UI/UXデザインの神が宿る細部」 にて

 

マイクロインタラクションとは、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのこと

 

と記しており、以下の4つの要素で構成されます。

1. トリガー（いいねを押す、などユーザーのアクションを促す要素）
2. ルール（いいねを押した相手に通知が届く、などユーザーのアクションによって何ができるのかという決まり）
3. フィードバック（いいねを押したことでボタンの色が変わる、などユーザーが何が起こったのか理解できるような動き）
4. ループとモード（どのような条件で1~3を繰り返すのか）

 

マイクロインタラクションを配置することでユーザーのアクションが反映されたことをわかりやすく伝えることができます。
「いいねを押すとハートの色が変わる」などがわかりやすく身近な例です。

次章ではもう少し具体例を見ながらマイクロインタラクションがもたらす効果についてお話します。

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

ユーザーのアクションが反映されたことがわかる

画像引用：Instagram

 

投稿をアーカイブに保存すると、画像が小さくなって収納されるアニメーションが発生します（画像右下の小さなアイコン）。
これは「保存した」ことが視覚的に理解しやすいインタラクションです。

 

画像引用：Gmail

 

メールを送信すると「送信しました」の文字が画面下部に表示されます。
この表記があることで、ユーザーは「メールが送信された」ことがわかります。

もし大切なメールを送った際に、この表記がなければきちんと送信されたかわからずユーザーは心配になってしまうでしょう。

一目見ただけでアクションが反映されたことがわかるということは、想像以上にサービスを使いやすくしているのです。

退屈な時間も楽しくすることができる

サービスを起動する際、読み込みに時間がかかることがあります。この空白の時間はユーザーに飽きや焦燥感を感じさせ、離脱の原因になり得ます。

そこで、たとえばユーザーを飽きさせないローディング画面を用意します。
普段、アプリやWebサービスで目にするローディング画面もマイクロインタラクションの一つなのです。

以下で事例を紹介します。

 

画像引用：Ueno Interview

 

面白い・美しいマイクロインタラクションが用意されていたら、ついつい見てしまうだけでなく読み込みの空き時間を楽しくすごすことができます。

こういったマイクロインタラクションの応用はユーザーの離脱を減らすことに有効です。

 

画像引用：dribbble

 

パーセンテージやゲージでの表現は「いつ読み込めるかわからない」というユーザーのストレスを緩和する効果もあります。

便利機能や遊び心で愛着を持ってもらうことができる

ボタンなどの特別な表記がなくてもユーザーのアクションによって現れるリアクションを不可視トリガーといいます。
たとえば、画面の長押しやマウスオーバーで現れる動きなどです。

下記にて詳しくご紹介します。

 

 

スマートフォンのアイコンの配置変更・削除機能は、不可視トリガーの代表的な例です。

特別な表記、誘導がなくてもアプリを長押しすることでユーザーがアクションすることができます。

 

画像引用：Facebook Messenger

 

こちらの画像はFacebook　Messengerの「いいね」機能です。

長押しで通常タップよりも大きないいねサインを送ることができます。友達から「こんな機能知ってた？」と言われれば、つい使いたくなってしまいますよね。

このような遊び心ある隠れた機能は、ユーザーがサービスに好感を持つきっかけとなりロイヤルティ向上にも期待ができます。

 

不可視トリガーの多用はおすすめできませんが、効果的に取り入れることで、サービスに愛着や遊び心を持ってもらうことができます。
小さなユーザー体験を散りばめることで、使いやすくもユーザーを飽きさせないサービスを目指したいですね。

マイクロインタラクションをデザインする上での注意点

1. 予想外の動きは避ける

たとえば、一本のローディングバーが100%になったとき、また新たなバーが現れてカウントを始めたらユーザーはどう思うでしょうか。
おそらく「100％になったのにまだ待たなくてはいけないのか」と苛立ちを覚えることでしょう。
これでは、待ち時間を知らせてストレスを減らすというマイクロインタラクション本来の役目を果たせていません。

予想外の動きでユーザーの心理を裏切ってしまうマイクロインタラクションは、かえってストレスにつながる恐れがあるため、できるだけ避けましょう。

2. 目立ちすぎないこと

たとえば、いいねを押しただけで毎回派手なリアクションが返ってきたら、画面の動きに疲れて何度もボタンを押すことがはばかられてしまいますよね。

華やかにすることを目的にマイクロインタラクションを導入するのではなく、「ユーザーのストレスや飽きを解消し、わかりやすく情報を伝えられる工夫」を目的とした導入をすることが大切です。

ユーザーの情報処理に負荷を与えすぎない程度の動作をおすすめします。

まとめ

マイクロインタラクションは「ユーザーへのサイン」としての役割がほとんどです。
そのため、サービスを構築する際に「優先度の低いアクション」として後回しにされがちな側面があります。

しかし、マイクロインタラクションはサービスを利用するための道しるべとしてユーザーの直感的な操作を助けることができます。
ユーザビリティの高いサービスを構築するためにも、マイクロインタラクションにしっかりと目を向けることが大切です。

特にスマートフォンが主流の現代では、ベッドの上で寝転がりながら、傘をさしながらサービスを利用するシーンも想定できます。サービス構築の際は機能や情報を載せるだけではなく、より感覚的な操作を可能にする構造を考える必要があるでしょう。

「ここを押せばこのメニューが出てくる」と直感的に操作ができるからこそ、ユーザーはより手軽にサービスを利用することができるのです。
ぜひ、UI/UXを向上させる一つの手段としてマイクロインタラクションを採用してみてください。

 

 

【English summary】

Microinteractions are subtle feedbacks to a user's minor actions on a website or app. Examples include the color change of a button when clicked, or the checkmark that appears upon completing a form.

Although each of these is a small element, they play a very important role in giving users a sense of assurance that "their action was correctly registered" and in creating a pleasant UX (User Experience). Excellent microinteractions guide user operations in a fun and understandable way, fostering affection for the brand. It is the attention to detail, not just functionality, that greatly influences user satisfaction.