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

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

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を向上させる一つの手段としてマイクロインタラクションを採用してみてください。