説明なしでもわかるUIを実現するために！マイクロインタラクションの基本を理解しよう

マイクロインタラクションを取り入れた事例

では、実際にマイクロインタラクションを取り入れた事例を見ていきましょう。
上で紹介した4つの種類を確認してから見ると、マイクロインタラクションが目指すところが見えてくるはずです。

Search app microinteractions by Lukas Horak - Dribbble
文字を入力すると裏側の仕組みで予測し検索キーワードをサジェストしてくれます。
もちろん文字を入力するだけでなく、すぐに音声検索できるようなトリガーも見やすく表示してくれています。

Like/Unlike microinteraction for Loliful.io by Igor Izhik - Dribbble
自分がいいねした時のフィードバックだけでなく、人間味のあふれる視覚的なアニメーションを提供しています。
人がよく行うような仕草を用いることで、インターネットと現実世界の隔たりをなくすことができるはずです。

Daily UI #002 - Credit Card Payment by Eszter Toth - Dribbble
必須の入力フォームを全て埋めなければ購入ボタンを押せないようになっているのはよく見る仕様です。
エラーが起きないように、起きたとしても最小限に抑えるためにユーザーに知らせる必要があるでしょう。

マイクロインタラクションを使う上で気をつけたいポイント 

マイクロインタラクションにはアニメーションが重要な要素となりますが、制作しているとアニメーションの動きの美しさに固執してしまいがちです。
ユーザーにとっての使いやすさを向上させるためのもので美しいかどうかは問題ではありません。

「とにかく美しい動きを」といったデザインを求めると無駄な部分が多くなり、初めて使うユーザーにとって困惑させる原因にもなります。
マイクロインタラクションがあることで、画面遷移に時間がかかり過ぎたり、予想と違ったアクションが起きるのは良くありません。