新規事業のプロダクト開発/UIデザインでお困りの方へ

新規事業のUIデザインから開発、サービスグロースなど、まずは一緒に話しあってみませんか？ お気軽にご相談ください。

お問い合わせフォーム

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

最近、アプリやWebサービスを開発する中で耳にするようになった、「マイクロインタラクション」とはどういったものなのでしょう？

まず、インタラクションという言葉は英語の「inter（相互に）」と「action（作用）」を合わせた言葉で、ユーザーが何かアクション（操作や行動）をした時に、システムや機能が一方通行ではなく相互に反応することです。スイッチのオン/オフによってパソコンが起動したり、何かを入力してエンターキーを押すことで完了画面が出たりすることもインタラクションの一つです。

マイクロインタラクションとはそのインタラクションの中でも最小単位になる反応を指しています。例えば、アプリなどでボタンを押した時にボタンが凹んだアニメーションになることで、ユーザーはボタンを押した感覚を得ることができます。もしマイクロインタラクションが無く、押したかどうかわからないと、ユーザーは不安になり何度も押したり、無駄にストレスを感じたりしてしまいます。

マイクロインタラクションの目的は「システムに何が起きたのかをユーザーに正しく認知させる」ことです。

携帯電話が物理的なボタン等で操作できていた（いわゆるガラケー）の時代はボタンを押すことでユーザーはインタラクションを感じていたのですが、iPhoneのような液晶画面のタップやスワイプによって動作するアプリやサービスでは押した感覚が伝わりにくいため、マイクロインタラクションの重要性はますます高くなってきていると言えます。

以下にマイクロインタラクションの代表的な事例を紹介します。

完了までの進捗度を伝えるバー

登録とか申請とかいうボタン押下後、完了までに時間のかかる処理に対して全体の進捗をパーセンテージで伝えることでどれくらい待てば処理が完了するのかわからないといった不安を解消させることができます。

参考)
https://github.com/ivanvanderbyl/ui-progress-bar

現在見ているページの場所を伝える

それぞれの見出しをタップした際に、そこが押されたようなアニメーションが実行され、見出しの色が変更されることで、現在見ているページがどこであるのか、ユーザーにわかりやすく認知させています。

また、画面遷移もパッと切り替わるわけではなく、横に移動するアニメーションを見せることで、アプリの全体的な構造として縦にスクロールするものではなく、横にスライドさせるコンテンツであるということを伝えることができます。

参考)
https://material.io/design/motion/understanding-motion.html#usage

マイクロインタラクションが後回しにされてしまう主な理由

その重要性が注目されているマイクロインタラクションですが、実際の開発の現場ではなかなかすべてを実装することは難しいケースもあります。様々な理由がありますが、大きな要因として、実装するコストに対してどの程度効果があるのか見えにくいことが大きな要因です。

エンジニアの実装工数がかかってしまう

マイクロインタラクションを実現するにはサービスの特性にあったアニメーションをエンジニアが１から実装する必要があるため、開発に時間がかかってしまいます。

リリース時期が決まっているサービスの場合はその他の画面や不具合が優先されることもあり、それらの優先度と比べるとどうしても細部に対するインタラクションというのは後回しにされており、リリース後に調整するといった判断になってしまいます。

実装するための指示が難しい

インタラクションを表現する際に用いられるアニメーションは静的なデザインだけでは表現できないのでデザイナーとエンジニア間で調整が必要になります。

従来のWebサービス開発においてはデザイナーが画面をデザインし、その素材をもとにエンジニアが実際に動くようにプログラミングするケースが多いのですが、ボタンを押した後の反応のデザインまで設計の段階で落とし込むのは難しいケースがあります。

その場合の進め方として考えられる方法としては2つあります。

• デザイナーがアニメーションを含めたデザインを動画等で作成してエンジニアに伝える
• エンジニアがニュアンスを汲み取って直接実装をおこなって精度をあげてゆく

デザイナー/エンジニア間でコミニケーションが取りやすい環境であれば上記のような方法でも問題ないのですが、完全に分業でデザインや開発が進んでいるような現場ではインタラクションの部分は担当が宙に浮いてしまい、結果ローンチ間際に問題が発覚して最低限の対応で進めてしまうという場合があります。

神は細部に宿る

以上のような背景から、マイクロインタラクションはサービス開発の最終段階において、リリースまでの間に余力があれば実装するといった優先度になってしまい、その結果「マイクロインタラクションまで手が回らなかった」というケースになりがちです。

しかし、私はマイクロインタラクションをないがしろにするのは間違いだと考えます。

マイクロインタラクションが十分でないと、主な機能の仕上がりがいくらよくてもユーザーはページの読み込みに待たされたり、操作性がわからないといったことでイライラしたり不安を感じたりします。

また競争の激しい分野では、機能が類似するサービスの中で、いつまでも利用してもらえるロイヤリティを高めてくれるのはサービス全体のユーザー体験です。マイクロインタラクションは一つ一つの細かなユーザー体験の積み重ねによってサービス全体の質を高めてくれると私は考えております。

ユーザー体験を高めるためにもマイクロインタラクションの重要性を事前に関係者に伝えておくこと、デザイナーと連携してなるべく短時間で実現できるように設計をしておくことで妥協をせずに細部にこだわり抜いたサービスをオープンさせることができると思います。

Relicではマイクロインタラクションやデザイン思考を活用し、企業のビジネス課題を解決するご支援をしております。
既存・新規事業のサービスデザインから開発、サービスグロースまで一気通貫でご支援いたします。
デザイン/開発の相談・お見積もりなどお困りのことがあればお問い合わせ窓口よりお気軽にご連絡ください。