ユーザーは常にサイト内の機能とインタラクションをしています。そして、あなたが想像する以上にそのような小さなインタラクションは重要です。
小さなインタラクションは全体の体験に影響を与えます。これを利用してユーザー体験を向上させて、ユーザーが最後までインタラクションを続けてくれるようにしましょう。
マイクロインタラクションとは何か
これらの小さなインタラクションには、マイクロインタラクションという適切な名前があります。マイクロインタラクションは、ユーザーがサイトとインタラクションをする際に行う基本的なタスクです。上手にデザインされているサイトは、ユーザーが操作するときにポジティブなフィードバックを与えます。ユーザーは、それらをページ遷移や動きの一部のように感じるでしょう。これらのインタラクションは自然で直感的でなくではなりません。
これらのインタラクションによって、ユーザーはシングルタスクが実行できるようになります。シングルタスクとは、Webサイトとの同期や音量・明るさの調整、コメントを投稿、いいね、機能のオン・オフなどです。
つまり、マイクロインタラクションは、ユーザーが自分のタスクを達成したことを認識するためにあるのです。
マイクロインタラクションの例
インタラクションは通常、ユーザーの取った行動がきちんと動作したことを示すため、何かしらのレスポンスを返しますが、ほとんどの場合ユーザーには気付かれません。マイクロインタラクションに対するサイトの反応は、インターフェイスにおいてシームレスなものでなければなりません。ユーザは認識しないかもしれませんが、マイクロインタラクションはUXの成功を左右するのです。
マイクロインタラクションはWebサイトのデザインに限りません。これは、レスポンシブデザインの機能を持つあらゆるデバイスが対象です。マイクロインタラクションの例には、サイレントモードのときに振動するスマートフォンや、Facebookで何かを「いいね」したときに鳴るサウンドなどがあります。
そのようなインタラクションは条件反射のようなもので、ユーザーはインタラクションに対して何かご褒美をもらっているように感じます。誰かの投稿に「いいね」をすると、クリックの達成感があります。たとえば、携帯電話でバイブレーションを設定をしたときに、とても静かなフィードバックが返ってくれば、設定ができたことがわかるでしょう。
Webサイトのマイクロインタラクションを作成する際、デザイナーはユーザーにポジティブな体験をして欲しいと思うはずです。そうすることで、ユーザーは理由はわからなくても自然とより良い体験を得ることができます。
優れたUXのためのマイクロインタラクションの活用
マイクロインタラクションとは何かを理解した上で、マイクロインタラクションがもっとも大きな影響を与える可能性がある場所を考えてみましょう。これから、ユーザー体験を向上させるための９つのマイクロインタラクションについて紹介します。
１. 設定の調整
ユーザーがサイトの音量や明るさなどの設定を調整できる場合には、マイクロインタラクションを組み込みましょう。ユーザーが設定を調整するのと同時に小さなロゴが動くといったようなことは、ユーザーとやりとりするのに良い方法です。
画像：Nick Buturishviliによるボリュームコントロールマイクロアニメーション
２. メッセージまたはコメント
フィードバックやコメントは、それ自体がマイクロインタラクションです。もし反応がなかったり、不親切であったりした場合、しっぺ返しを食らう可能性があるでしょう。
チケット販売会社のTickPickを見てみましょう。TickPickのミシガン州の地図上にアッパー半島が記載されていなかったとき、住民たちはすぐ会社に知らせました。
TickPickのソーシャルメディアでの回答は「我々はミシガン州の重要な部分は記載しています。それで十分ではありませんか？」でした。そして謝罪はせず「ミシガン州のアッパー半島は住むにはいい場所だと思いますし、故意に地図から外したわけではないと断言します。しかし実際のところ、アッパー半島はただの森林です。」と発言したのです。
このサービスのオーナーは、地域社会へ償いをしましたが、それは決して安いものではありませんでした。彼はアッパー半島まで行き、高級パブで地元民たちにご馳走しました。すべての企業がこの事例から教訓を得るでしょう。ソーシャルメディアの対応チームをしっかりと養成し、好意的な状態を維持してください。
３. アップロードまたはダウンロードのステータスバー
何かをアップロードしたりダウンロードしたりすることを決定したあと、そのまま取り残されたような気にさせられるのは誰しもが嫌だと思うでしょう。アップロードやダウンロード中に何が起こっているのかをユーザーに知らせておくと、ユーザーは離脱しないでいてくれるかもしれません。しかし、もし自分のタスクが達成できたかどうかわからない場合には、ユーザーは体験を良く思わないでしょう。
画像：Arto Baghdasaryanのダウンロードボタンの切り替え
４. 通知
ユーザーがあなたWebサイトから何らかのタイプの通知を受け取っている場合、マイクロインタラクションが関与しています。アニメーション通知を開発することでユーザーの注目が集まり、確認する必要があるという重要性を示すことができます。
あなたの通知が楽しくて魅力的なものである場合、ユーザーはあなたの企業に対しても同じ感情を抱くでしょう。
画像：Blaine Billingsleyの通知バッジ
５. プルダウンメニュー
ユーザーがモバイルデバイスでWebサイトを閲覧している場合、別のページを分割する必要があります。ページ上のプルダウンメニューを使用すると、ユーザーは自分がいる場所を見失うことなくページ間をすばやく移動できます。このシンプルな反応がなければ、ユーザーはナビゲーションに不満を抱くでしょう。
６. ページの読み込み
あなたのWebサイトに、ほかのページよりも読み込むのに時間がかかるページがあるかもしれません。小さなインタラクションでページがまだ読み込まれていることをユーザーに通知すると、ユーザーをその場にとどめて読み込みが完了するタイミングを知らせることができます。
このマイクロインタラクションはユーザーへの礼儀として機能し、ユーザーの直帰率を抑えるのに役立ちます。ページが読み込み中だとわかる場合、サイトが単に反応していないと推測して離脱してしまうような可能性が低くなるでしょう。
７. 入力内容の視覚化
Webサイトにデータを入力したユーザーは、入力したデータを見たいと思っています。お問い合わせページやクレジットカード情報を入力した際、視覚化することで正しい情報を入力したことが明らかになります。こういったマイクロインタラクションは、エンゲージメントの楽しさには欠けるものの明快さとセキュリティに寄与します。
入力内容の視覚化はユーザーとの信頼を築き、サイトが信用できるものであると感じるようにします。
画像：Cooper Maruyamaのログインアニメーション
８. レスポンシブなコールトゥアクション
マイクロインタラクションはユーザーの関心を引き、ユーザーにコールトゥアクション（CTA）を促すことができます。これはWebサイトを持つ重要な理由です。
視覚的合図やアニメーションを使用してユーザーの注意を引き、クリックを促しましょう。ユーザーが操作したくないと感じるような、おしつけがましくて目ざわりなインタラクションにならないようにしましょう。
Image：MichałWójtowiczのUIボタン
効果的なマイクロインタラクション
ユーザーに効果的なマイクロインタラクションを配置するには、４つの重要なステップがあります。
- トリガー：ユーザーを次の行動へと促すためのきっかけです。
- ルール：マイクロインタラクションのパラメータ（文言など）は、ユーザーにインタラクションで何が起こるかを示します。
- フィードバック：ユーザーがマイクロインタラクションをクリックするとき、何らかの反応を返します。
- ループとモード：あなたのマイクロインタラクションがどのくらいの頻度で使用されるか、また新旧どちらのユーザーにも認識されるようにするにはどうしたら良いかを検討します。ループすることでユーザーはあなたのインタラクションにより親近感が湧きます。モードは別のフィードバック反応で、ユーザーの操作が最初とは異なるものであることを示すものです。
より良いユーザー体験のためにマイクロインタラクションを活用する場合には、いずれにせよある程度の能力が必要なWebデザインの面との、明らかな関連付をするでしょう。マイクロインタラクションをサイトに追加する際には、これらのアイデアを考慮してみてください。
