マイクロインタラクションとは？UXに取り入れる際の5つのポイント

更新日: 2017年02月08日

「"中身を読まずに"表紙のデザインやタイトルを見て本を買ってしまった」
あなたも、このような経験はありませんか？

この行動自体は、決して珍しいものではありません。
だからこそ、本や雑誌、書籍と同様に、ホームページも*「見栄え」や「タイトル決め」*というのは非常に重要な要素といえます。

しかし、「UXデザイナー」という職業が確立された昨今、今求められているのは外観（見た目）だけではありません。
ホームページでいえば『内容』や『体験』にフォーカスする必要があります。

それでは、どうすればユーザーに満足してもらえる内容・体験になるのでしょうか。

その答えのヒントとなるのが*「ヒューマンセンタードデザイン(Human-centered Design、人間中心デザイン)」*です。感情や日常表現も含めて普段使っている言葉と同じ言葉で語りかけ、必要な時にはあなたを笑わせたり驚かせたりします。AIチャットなども、こうしたヒューマンセンタードデザインを取り入れています。

UXの世界では、ヒューマンセンタードデザインのアプローチ方法の一つとして*「マイクロインタラクション(Micro-interactions)」*という手法を取ります。この手法を採用すれば、ユーザーとの距離も近くなり、ホームページの離脱率が下がるだけでなく、再訪問率の向上にもつながります。

今回は、「マイクロインタラクション」の中身と、Web担当者やUXデザイナーがすぐに取り入れられるマイクロインタラクションのポイントをお伝えしていきます。

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

マイクロインタラクションとはヒューマンセンタードデザインのアプローチ手法の一つです。
ただ白紙のページに芸術的なデザインを施す従来型のデザインとは異なり、人間の感情も含めてユーザーとコミュニケーションを取ることを重要視しています。

マイクロインタラクションは、直訳すれば*「とても小さなやりとり」*という意味です。UXの世界では、ユーザーに瞬時にフィードバックを提供したり、進行中のプロセスの状況を伝えたり、システムやアルゴリズムがどれだけ複雑だとしても非常にシンプルな操作を促すように、ストレスなくユーザーとのコミュニケーションを取っていきます。

それでは、今日から実践的に使える「マイクロインタラクション」にはどのようなものがあるのでしょうか。具体的に見ていきましょう。

実践「マイクロインタラクション」5つのポイント！

ポイント1：常に進行状況(ステータス)を伝える

Progress Bar Animation
By xjw on Dribbble

想像してみてください。例えば、百貨店で服を買う時に、気に入ったジャケットを購入しようと決めます。しかし、自分に合うサイズではなかったので、店員さんに自分のサイズを伝えて、取りに行ってもらいます。ところが、なかなか店員さんが帰ってきません。多くの方は待たされることにストレスを感じるはずです。

ホームページを巡回する時も、同じような状況に遭遇することがあります。アップロード中のファイルが完全にアップロードされるまでの時間がわからなかったり、ページが重くどれくらいで読み込まれるのかがわからなかったりする時です。

マイクロインタラクションでは、現在ホームページ上で何が起こっているのかを明示するのが重要だと考えます。
背景の色を変えたり、プログレスバーで進行状況を伝えたり、音を流して変化させたりするのです。

しかし、一つだけ注意点があります。それは、ユーザーを退屈させないことです。淡々と変化するだけの背景やプログレスバーは人間的なデザインとは程遠いので、可愛らしい人間的な動きをするアニメーションを取り入れましょう。もちろん、アップロードに失敗した時もです。そうすれば、ユーザーはイライラするどころかニッコリ笑ってくれます。

ポイント2：ハイライトやアニメーションを効果的に使う

Hamburger Memu
By Tamas Kojo on Dribbble

最近のデザインでは、余計なスペースを取り除くために、ボタンを押したら必要な場合だけ他のボタンやメニューが表示されるようになっています。ハンバーガーメニューやスライドメニューがその例として挙げられます。

ここで大切になってくるのが、そのボタンを押せば他のボタンやメニューが出てくると、ユーザーに瞬時に気付かせてあげることです。
押してはじめて何が行われるのかがわかるボタンや、そもそも押すべきものかがわからないボタンは、ユーザー体験を低下させるからです。

そこでマイクロインタラクションでは、自らが変化のきっかけを知らせる動きやデザインを重視します。具体的には、マウスホバーで色が変わったり、ツールチップでボタンが押された後のアクションを表示したり、アニメーションでボタンの存在を知らせたりすることです。

ユーザーの視線を集め、見逃さないようにすることが大切です。

ポイント3：コンテクストを保つ

Keep Context
By Ramotion on Dribbble

スマートフォンやスマートウォッチのような非常に小さな画面を持ったデバイスでは、1つの画面にたくさんの情報を詰め込むことは難しくなっています。
その解決策の1つが、別のページへ遷移する際にわかりやすく誘導してあげることです。

マイクロインタラクションでは、直前のコンテクスト(文脈)を保持したまま詳細情報をユーザーに表示させる手法が好んで使われます。
ここでも重要になるのがアニメーションです。

いきなり真っ白になってまた別のページに遷移すると、直前のページにいた時の情報が忘れ去られてしまいます。アニメーションを効果的に使うことで、小さな画面でも直前のコンテクストを保ったままページを移動することが可能になります。

ポイント4：行動を呼び起こす

Call to Action
By Ramotion on Dribbble

ユーザーと効果的にコミュニケーションを取ることに加えて、マイクロインタラクションを上手に活用することで、ユーザー自身にコミュニケーションを促すことができます。閲覧を続けていたり、サイト内を回遊したり、いいねを押したり、シェアしたりするのです。

マイクロインタラクションでは、こうしたアクションを促す行動を*「コールトゥアクション(Calls-to-action)」*と呼びます。Twitterやインスタグラム、Facebookの動画広告でも、広告の隅に「詳しくはこちら」「もっと見る」というボタンが表示されており、コールトゥアクションを意識した作りになっています。