皆さんは、マイクロインタラクションという言葉を聞いたことはありますか?

おそらく多くの方が、その意味を明確に答えられないのではないでしょうか。

マイクロインタラクションは、「アニメーションの実装」が1人歩きしてしまい、誤った方向にデザインしてしまうことがあります。マイクロインタラクションを正しく理解すれば快適なユーザー体験を作り出すことができますが、場合によってはユーザー体験を台無しにしてしまうことすらあるのです。

そこで今回は、*もう一度理解したいマイクロインタラクションの基本の「き」*をご紹介します。

マイクロインタラクションの仕組みから注意点まで、改めて確認していきましょう。

参考:
マイクロインタラクションとは?UXに取り入れる際の5つのポイント|ferret
説明なしでもわかるUIを実現するために!マイクロインタラクションの基本を理解しよう|ferret
  

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


▲ スワイプ時のマイクロインタラクション|dribbble

マイクロインタラクション(microinteraction)とは、Webの世界ではユーザーの何らかの処理を受けて反応する微細な反応のことです。

デザインの現場では、UIアニメーションと同じだと解されることもありますが、ユーザーのアクションに対して反応するという点ではアニメーションとイコールだとは言えません。しかし、よく誤解されているのは事実です。

また実をいうと、マイクロインタラクションは、アナログ・デジタルにかかわらず私たちの日常生活の様々なところで見ることができます

例えば、エレベーターでボタンを押したら光ったり、お風呂のお湯を沸かすボタンを押したら「ピッ」と音が出たりするのも、全ては広義のマイクロインタラクションです。

これがもし、エレベーターのボタンを押しても光らなかったり、お湯のボタンを押しても何にも反応しなかったらどうでしょうか。マイクロインタラクションは、ユーザーの行為に対して反応していることを示す、重要なデザイン工学的アプローチだと言えます。
  

マイクロインタラクションを4つに細分化

Microinteractions.comを主催するダン・サッファー氏によれば、マイクロインタラクションは4つのパートにわかれています。

1. トリガー

*トリガー(trigger)*は動きのメカニズムを作動させるアクションです。

あなたが朝、コーヒーのポットのスイッチを押すという行為が、トリガーの一例です。それと同じように、Webサイトでボタンをクリックしたり、フォームに入力するという行為はすべてトリガーとなります。

正確に言えば、トリガーは2種類あり、上記のトリガーは*「マニュアルトリガー」(manual trigger)と言われています。もう1つのトリガーは「オートマチックトリガー」*(automatic trigger)と呼ばれており、特定の条件を満たす時に後続のアクションが行われる際のトリガーです。

例えば、ブログサービスでコメントがされた時にプッシュ通知が来る時、コメント行為自体がオートマチックトリガーになります。
  

2. ルール

*ルール(rule)*はシステムを機能させるための手順のことをいいます。

例えば、コーヒーのポットのスイッチが入っていない時にスイッチを押すとお湯を沸かし始めますが、光っているボタンをもう1度押すとお湯を沸かすのを中断します。同じボタンを押しても、条件が変わることで次の結果が変わることがあります

Webサイトの場合を考えてみましょう。動画の再生ボタンは動画が再生していない時に押すと再生し、再生中に押すと一時停止します。ここにも、コーヒーポットと同じように手続きのルールが存在しているのです。
  

3. フィードバック

*フィードバック(feedback)*は、私たちが起こしたトリガーが成功したかどうかを知らせることです。

コーヒーポットのボタンが押された時に「ピッ」と音がなって、動作がうまくいったことを知らせてくれます。
  

4. ループとモード

*ループ(loop)モード(mode)*はマイクロインタラクションの長さや機能にかかわるところで、ループは文字どおり「反復」のことを指します。

例えば、目覚ましをかける際に設定されるスヌーズの機能は一種のループだと言えます。この時、目覚まし時計の音は止められるまでにだんだんと大きくなります。

つまり、ループを行うことでフィードバックを大きくしています。Facebookメッセンジャーで「いいね!ボタン」を長押しすると、より大きな「いいね!」を送ることができるのも1種のループだと言えます。

モードは機能性にかかわる部分です。機内モードにしたらモバイル端末の通信を制限するのは、モードが変わったからです。また、自転車のギアを変えると漕ぎやすくなったり漕ぎにくくなったりしますが、これもモードが変わったからだと言うことができます。