こんにちは。TechAcademyの小嶋です。

皆様は「マイクロインタラクション」という言葉をご存知でしょうか。
誰にでもわかりやすいUI/UXを目指したもので、Webサービスやアプリなど様々な場面で使われています。
朝起きてアラームを解除するところから夜スマホの充電を開始してから寝るまで、数多くのマイクロインタラクションに触れています。

今回は、マイクロインタラクションの基本概念と利用するメリットを解説します。
あらゆるサービスに応用できる概念なので、ぜひこの機会に覚えておきましょう。

マイクロインタラクションとは:誰でも直感的に何をすればいいかがわかるデザイン

マイクロインタラクションとは、「ヒューマンセンタードデザイン(人間中心のデザイン)」と呼ばれるデザイン手法の1つで、「今どのような状況で、次にどう行動すれば良いのかを直感的なUIで伝える」ことを目的としています。
説明書を読まずに簡単に操作できる状態を実現することで、ユーザーに心地よい体験を提供できます。
心地よい体験を提供できれば、自然と利用機会が増えるので自社サービスの成長に繋がります。

iPhoneが登場した時、「スマートフォン」という未知のデバイスにも関わらず爆発的に普及したのは、iPhoneとiOSにマイクロインタラクション的なデザインが随所に施されていたからでしょう。
Googleが推奨している「マテリアルデザイン」も、物理法則を取り入れたデザイン＝人が直感的に理解できることを重視するもので、マイクロインタラクションを取り入れたデザインと言えます。

マイクロインタラクションは、ユーザーが「わかりやすいか、さらに使いたいと感じるか」が重要な指標となります。

マイクロインタラクションのメリット

マイクロインタラクションはそもそもがユーザーファーストな視点に立っているので、取り入れるメリットは無数にあるでしょう。
代表的なポイントとして以下の3つが挙げられます。

・新しいサービスでも、説明なしに利用してもらえる
・操作ミスの発生率を下げる
・継続的なサービスの利用に繋がる

マイクロインタラクションを突き詰めていくと、最終的にはブランディングに繋げられます。
iPhone、iOSもそうですし、例えばFacebookの「いいね！」ボタンは、直感的な操作を実現している代表的な機能の1つで多くのサービスに影響を与えるほどスタンダードな機能となりました。 

マイクロインタラクションを構成する4つの要素

では、マイクロインタラクションを実現するためにはどのような要素をおさえればいいのでしょうか。
以下より、マイクロインタラクションの構成要素を4つに分けて解説します。

1.トリガー

トリガーは、ユーザーにアクションを促すような要素で、ユーザーに気づきを与えるものです。
アプリを初めて使うユーザーからすれば使い方が分からないため何をすれば良いのか伝える重要な要素でしょう。

例）メッセージ受信時に音が鳴る、Twitter上に「新しいツイートがあります」と表示

 

2.ルール

ボタンを押したときに何ができて、何ができないのかなどのルールを定義します。
また、エラーを最小限にするためにユーザーに通知する要素になります。

例）これ以上は音量が小さくなりません、大きくなりませんといった通知

 

3.フィードバック

音や視覚などユーザーの動作が認識されたことを示すもの。
ユーザーが何かを実行した時、処理が始まった時・終わった時、処理が続行中であることを示す時に使う種類の要素です。

例）消音にした際に振動するといった動き、ログイン時パスワードが間違っていたらフォームが横揺れするなど。

 

4.ループとモード

ユーザーの行動に合わせてより大きなルールを決めます。アプリを毎日ログインしたり、頻繁に利用するきっかけになるでしょう。

例）周辺の天気を毎日確認するために自分の住んでいる都市を選択する、facebookで友達になって1年経つと動画を作って知らせてくれる