マイクロインタラクション
1. マイクロインタラクションとは？
「マイクロインタラクション UI/UXデザインの神が宿る細部」という書籍によると、「マイクロインタラクションとは、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのこと」と記載されています。
インタラクションとは、人間から何らかの作用を受けたシステムや機器が、その作用に応じた動作を返すことを表すようですのでアプリ上のマイクロインタラクションとは、人がアプリで何か操作した際に、アプリがその操作に対して何かしらの動作を返す最小単位の表現を指すのかと考えられます。
2. マイクロインタラクションを取り入れる目的？
ユーザーのアクションに対して、システム側のステータスの変化を伝える（フィードバックする）ことや、正しい操作を促して目的の箇所に誘導する、あるいは特徴的なアニメーションを使用することによるブランディング効果を狙うなど多岐に渡ります。
例)
・タスクの進行状況を伝える
（例：プログレスバー）
・現在のステータスを伝える
（例：タブを切り替えて、現在の画面の状態を伝える）
・アクションに対してのフィードバックする
（例：いいね）
3. マイクロインタラクションを用いた効果
株式会社つみきさんが、マイクロインタラクションを用いた効果に関しての記事をnoteに記載してます。
機能の利用回数が26%上昇したそうです。
以下の掲載文をご覧ください。
■事例
1)サインイン
エラーだった場合どこがエラーになっているのか、
パスワードがバリデーションがOKの場合チェックマークがつく
2)ローディング
ダウンロードまでの状態を表現
3)メール通知
未読数の変化と内部の用紙の切り替え
4)面白い表現
顔の表現の切り替え
4. マイクロインタラクションの構成
以下の4つの要素で構成されます
いいねのボタンを参考例として下記に記載します。
・トリガー
マイクロイクロインタラクションを開始するものを指します
（参考例：いいねボタンを押す、などユーザーのアクションを促す要素）
・ルール
マイクロインタラクションがどう動くのかを決める
（参考例：いいねを押下後、通知が届く、などユーザーのアクションによって何ができるのかを決めたもの）
・フィードバック
何が行われ、その結果として何が起きたかを示す。
（参考例：いいねを押下後、いいねマークの色が変わる、などユーザーが何が起こったのか理解できるような動き）
・ループ
繰り返しを指す
（参考例：どのような条件で1~3を繰り返すのか）
5. マイクロインタラクションはアニメーションするものではない
マイクロインタラクションはアニメーションするものではないようです。
上記の参考例のいいねも色が変化するときにアニメーションについては、記載をしていません。
また、他の事例としては、部屋の電気をつけると明かりがつく、これもアニメーションがないマイクロインタラクションの例です。
アニメーションは、ユーザにデザインをよりよくわかるように伝える手段として利用されるようです。
Dribbleというデザインを集めたサイトで見るマイクロインタラクションではアニメーションがついているものが多いです。
6. 注意点
以下のアニメーションをボタンクリックに利用した場合、何を相手に伝えたいことがわかりづらいかと
思います。アニメーションをさせるとき、何を表現するか意識して取り入れたら良いか考える必要がありそうですね。
https://cdn.dribbble.com/users/414694/screenshots/7441241/media/7e480f11aa523e23861e9668e57ffbe5.mp4
7. 余談
株式会社つみきさんは、アプリのマイクロインタラクションについて記事をいくつか執筆されているようです。
以下に記事例を掲載します。他にもnoteで執筆をされていますので、ご興味のある方はnoteの記事をご覧ください。
・瞑想系アプリのマイクロインタラクションを考察してみた
・メルカリのマイクロインタラクションを考察してみた
