マイクロインタラクションは、ユーザー体験を簡単で楽しく印象に残るものにします。
ほとんどのマイクロインタラクションは目立たなく気づかれにくいものですが、効果的に使うことで、ユーザーをプロダクトのファンにすることができます。
言い換えるならば、マイクロインタラクションには、ユーザーとテクノロジーの間にあるギャップを埋め、同時にユーザーを惹きつけることができる可能性があるということです。
マイクロインタラクションの４つの要素
Microinteractionsの著者であり、Mayfield Robotics のプロダクト統括責任者であるDan Saffer氏は、マイクロインタラクションを、「トリガー」、「ルール」、「フィードバック」、「ループ＆モード」の４つの要素で表現しています。
それぞれをさらに詳しく見ていきましょう。
＃１ トリガー
トリガーはインタラクションを引き起こすもので、ユーザーのアクションを促すようなちょっとした切っ掛けやビジュアルなどです。例えば、ユーザーにタップやクリックを促す動くアイコンなどが挙げられます。
Twitterのフィードでは、「↑ 新しいツイート」という青いボタンが表示され、まだ見ていない新しいツイートを見るようにクリックを促します。
素晴らしいトリガーは、ユーザーが気づいていないニーズを予測するものです。そのため、デザイナーはユーザーリサーチを行いデータを集めニーズを予測し、それに合わせてトリガーをデザインする必要があります。
＃２ ルール
ルールはトリガーと深く関わりがあります。ルールはインタラクションの間に何が起こるかを説明するものです。ルールは、エラーを最小限にするためにあり、ユーザーにとって自然と感じられるものであるべきです。
このとても良い事例は、Gmailで件名を入れずにメールを送信する時のインタラクションです。「このメールには件名がありません」と知らせた上で、それでも送信するかどうかと確認してくれます。
＃３ フィードバック
フィードバックはルールに基づいており、その時に何が起きているかをユーザーに伝えます。正しいコンテクストの中で、インライン・バリデーションを取り入れることは、ユーザーにとって有益なものとなります。
例えば、ユーザーネームを入力した時に緑のチェックマークが表示されていれば、次のパスワードの入力欄に進んで良いと理解ができます。フォームに入力して送信を押してから赤文字で「ユーザーネームかパスワードに間違いがあります」と表示されるのを何度も目にしてきました。
もし間違いを訂正をしながらフォーム入力ができるようにしたら、プロセス全体をより簡単なものにしてくれることでしょう。緑のチェックマークは小さなものではありますが、ユーザーがフォームを埋めるている途中と入力を終えてから感じることへ大きな変化をもたらします。また、高いコンバージョン率を達成する可能性を持っています。
Twitterの登録フォームはインライン・バリデーションの使われ方として素晴らしく、シンプルな一例です。入力を完了する毎にチェックマークが右側に表示されていきます。赤いエラーメッセージは、フォームを正しく埋めるには何をしなければならないのかを明らかにしてくれるのでとても便利です。
Hopperの旅行アプリもマイクロインタラクションを賢く活用しています。興味を持った目的地や日付を入力すると、アプリが「考え中」になります。そして検索結果を出すまでの間、かわいい小さなウサギが飛び回ります。誰でも「待つ」のは好きではありません。しかし、ウサギが飛び回るのを見せることでその短い待ち時間に小さな楽しみを与え、ユーザーに今何かが起きていて結果がもうすぐ出てくるということを知らせることができます。
＃４ ループ＆モード
ループとモードはインタラクションのより大きな、メタ・ルールを決定します。もしマイクロインタラクションが繰り返し使用された場合、インタラクションがそれに応じてどのように変化していくか考えることは重要です。ユーザーの行動に基づいて、どのようにインタラクションを変化させていくか考えましょう。マイクロインタラクションが最初に使われた時と、７度目に使われた際の違いはなんでしょう？
時間の経過に合わせて変化するループを作り、ユーザーとのインタラクションする度に、よりリッチな体験を提供するようにしましょう。Facebookの「過去のこの日」機能はとても良い例です。
大多数のFacebookのユーザーは１日に数回ニュースフィードをチェックします。４年前のステータス・アップデートや写真を時々表示するこの機能は、ユーザーにエモーショナルな（うまくいけばポジティブな）効果をもたらしてくれます。
このマイクロインタラクションには、ネガティヴな効果をもたらす可能性もあります。例えば、ユーザーを悲しませたりストレスを与えたりするような昔のポストを表示することは、意図していなかったネガティヴな結果を生みます。
マイクロインタラクションのポイント
マイクロインタラクションをデザインする時は、以下のようなポイントを覚えておくよ良いでしょう。
- 過度なデザインを避けましょう。マイクロインタラクションは違和感を覚えるようなものや、ロードに時間がかかりすぎるものではいけません。また、全体のシームレスなフローの中で、常に目的を持って使われるべきです。
- ユーザーが初めてマイクロインタラクションを体験した時に感じたものが、10回目、100回目と感じたものが同じでは駄目です。マイクロインタラクションをコンテクストに適応させましょう。例えば、初めて使うユーザーにはアプリ内を案内するための矢印を活用すると良いです。この時、案内のメッセージをこの先もう表示させないオプションを与え、うっとうしいと思われないようにしましょう。
- 何もないところから始めないこと。ユーザーリサーチによって、ユーザーのモチベーションとコンテキストを理解しましょう。例えば、20回目のマイクロインタラクションの時に、ユーザーがどのようなモチベーションで、どのような目的を持っているかを見つけ、その発見に基づいてマイクロインタラクションを作成しましょう。
- インタラクションは効果的かつ目立たないものであるべきということを覚えていてください。マイクロインタラクションが全体のデザインに、フィットしているかを確認しましょう。インタラクションを不自然であったり、わかりにくいものにするべきではありません。
