マイクロインタラクションについて

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

マイクロインタラクションとは、機能に存在する小さな振る舞いや、挙動のデザインをいいます。

具体的な役割としては下記になります。

• フィードバックや操作の結果をユーザーに伝える
• 操作が正常に完了したことをユーザーに伝える
• 直感的に操作できるという感覚を生み出す
• ユーザーの操作の結果を可視化して、エラーや失敗を防ぐ

実例を二つ挙げます。

一つ目はTwitterのいいねボタンです。
⇒

いいねボタンは、最初は灰色ですが、クリックされると上記の様に赤色に変わります。この時、単純に色が変更されるだけでなく、ハートマークが弾けるようなアニメーションによる演出が採用されています。1秒未満のかなり短いアニメーションですが、ユーザーに「いいねをした」というフィードバックと一瞬の快適さを返すことができます。これによって、ユーザーに特別な体験を提供することができます。
二つ目はアプリケーションなどの進捗を視覚的に表現するプログレスバーです。ロード中画面など、ユーザーが待っている間にストレスを軽減するために、アニメーションを用いています。

四つの定義

1. トリガー(Trigger)
2. ルール(Rules)
3. フィードバック(Feedback)
4. ループとモード(Loops & Modes)

トリガー(Trigger)

マイクロインタラクションを開始させる要素。ユーザーにアクションを促し、気づきを与えることができます。トリガーにはユーザーの動作によって引き起こされる「手動トリガー」と、
システムが一定の条件を満たしたときに引き起こされる「システムトリガー」があります。

ルール(Rules)

トリガーからマイクロインタラクションが開始されると、一連の動作が行われます。
また、単発か、繰り返し発生させるか、その状況において最適なインタラクションを検討すべきです。最終的にはインタラクションを通して、ユーザーが自然にゴールへと導かれることが好まれます。

フィードバック(Feedback)

ユーザーに何が起きているのかを知らせる反応のことをいいます。
さりげないフィードバックが好ましいとされています。

ループとモード(Loops & Modes)

ループは「定期的に通知を表示」などの経過に応じた変化や繰り返す回数を定義します。モードは「通知をすべて既読にする」などのループから外れた重要なルールを定義します。長期的なインタラクションのため、ユーザーの邪魔にならないように、さりげないものでないといけません。

最後に

WEB業界に身を置いているものとしては恥ずかしいことですが、マイクロインタラクションという言葉をこれまで知りませんでした。けれども、小さな挙動やアニメーションなどが最近増えてきていることは認識していました。そして、それに対しての快適さや心地よさを実感していました。利用しているユーザーの感情も配慮されたコミュニケーションは、ユーザーとの距離を縮めてくれる重要な要素になっていると思います。今後WEB制作を行ううえでしっかりと意識していきたいです。