マイクロインタラクションは、私たちの周りに溢れています。これはユーザインターフェイスの特定の瞬間のやりとりに用いられるものです。たとえば、ユーザーがモバイルアプリのボタンをタップするとナビゲーションメニューが開かれるなどが一般的なマイクロインタラクションになります。
より詳しく述べると、マイクロインタラクションとはユーザーがどこかでなにかの操作をしたときに起こる、インターフェイス上のアニメーションや変化を指します。ユーザーにとって有益な情報を提供するインタラクティブなアニメーションのことだと考えてください。マイクロインタラクションを利用する理由はたくさんありますが、ここでは４つの例を紹介しましょう。
１. 使いやすくなる
まず１つめは、使い勝手がよくなることです。上でも紹介したメニュー部分でいうと、ユーザーがメニューコンテンツを上下に操作するのに合わせてフィードバックがアニメーションで返ってきます。これによりユーザーは、視覚的に今自分がなにをしているかを理解できます。
ユーザーは、メニューが一時的に表示されていただけで、閉じたあとでもコンテンツが無くなるわけではないと理解しています。特にデフォルトでメニューが表示されているようなときに、マイクロインタラクションはユーザーがアプリやインターフェイスを理解するのを助けます。マイクロインタラクションによってアプリの流動性とコンテンツ間の関係が明らかになり、ユーザーは新しくまたは改めてコンテンツを理解できるようになるのです。
上記の例を見たとき、コンテンツ終了までスライドが右から左に動き続けることが予想できるでしょう。止まらずに絶え間なく動くアニメーション効果が、スライドをシームレスにみせています。頭を使うことなく、ユーザーが無意識にコンテンツを理解できる素晴らしい例です。
マイクロインタラクションを使うことで、メニューアイコンをクリックするとさらなるインタラクティブコンテンツが表示できることをユーザーに伝えられます。メニューを閉じてしまっても、コンテンツはそのまま消えずに残ります。アプリユーザー初心者であっても、この仕組みは簡単に理解できるでしょう。
２. より良いブランディングに繋がる
マイクロインタラクションは、アプリでの体験を総合的に高める素晴らしい方法です。アニメーションを使って、ブランド体験を向上させるような多くの機能をアプリに付け加えることができます。またマイクロインタラクションを利用すれば、アプリをより簡単でシームレスにすることができます。これはブランディングにも最適なのです。
これは私のお気に入りの例です。スムーズなアニメーションによるUIのおかげで、ユーザーにより良いブランディングを提供できるようになっています。ユーザーはシステム内で迷子になることなくクレジットカード情報を編集することができます。 美しいUIとアニメーションのおかげでシームレスな体験が実現でき、より楽しいブランド体験につながるのです。
３. ユーザーにフィードバックを提供する
マイクロインタラクションは、ユーザーへのフィードバック提供にも役立ちます。たとえば、ユーザーが架空のアプリになにかを投稿したと想像してください。投稿を受けて送信ボタンがローダーに変わり、送信が正常に完了したというメッセージが表示されます。
ローダーは、ユーザー行動によるリクエストが進行中であることを示す最初のフィードバックポイントです。そのあとに２番目のフィードバックポイントとして完了確認メッセージがあります。リクエストが失敗した場合には、完了確認メッセージの代わりにエラーや失敗のメッセージが表示されます。これらはすべて、マイクロインタラクションによるユーザーへのフィードバックです。
上の例は、私が先ほど説明したのと同じものです。このようなマイクロインタラクションは、アプリやWebサイトがバックグラウンドで動作していることを明確にフィードバックしてくれます。複雑なものは含まれておらず単にシンプルなアニメーションが変化したものです。簡単でしょう？
スライダーの使い方をわかりやすく表しているため、こちらも私の大好きな例です。モバイルフォンでは、ナビゲーションを使った解説が難しいことがあります。しかしこのようなUIでは、スムーズなアニメーションスライドで数値が表示され、選択している番号がユーザーにわかりやすくフィードバックすることができます。
スムーズなアニメーションのおかげで、ユーザーは自分のインタラクションがスライダーと連動して数字を選択していることがはっきりわかります。
４. ユーザーがコントロール感を感じられる
ユーザーには自分が操作をコントロールしているという感覚が必要です。ボタンやリンクをクリックしてもすぐに反応しないサイトや、新しいページが読み込まれるまで待たなければならないサイトに当たったことはありますか？ 本当にイライラしますよね？ イライラする原因は、なにが起こっているかを自分自身で把握できないことにあります。ボタンが壊れているのか、何度かクリックする必要があるのかもわかりません。ブログ投稿リンクならまだしも、複数回のクリック操作が、チェックアウトページで必要なときは最悪です。
ユーザーのコントロールが効かないと、ユーザー体験は酷いものになります。あなたや私のように、ユーザー側は操作しても何も変化が生じなければ驚くしかありません。
最初に紹介するマイクロインタラクションは背景のフェードインです。これは面白く種類もたくさんあるため、アプリにパーソナリティを持たせることができます。退屈で典型的なものではなく、わくわくするアニメーションです。また背景のフェードインは、ユーザーにタップしたものが確かに起動していることを教えてくれます。
次に紹介するマイクロインタラクションは＋が×に変わる部分です。これは、画面上に表示されたポップアップメニューが、スクリーン上の同じ場所を使用して閉じられることをユーザーにわかりやすく示したものです。なにが起こっているかがわかりやすく、操作に対するフィードバックがあるため、ユーザーがコントロール感を持つことができます。
上のオンボーディングコンセプトには、たくさんのマイクロインタラクションが含まれています。ユーザーはスライドのそれぞれにある歯や舌を使って操作ができます。使用されているアニメーションによって、マイクロインタラクションの持つ効果がユーザーにわかりやすく示されています。
さらに、緑色のスライド画面で舌を操作したときのテキストの変化に注目してください。選択したことが再確認できるよう、テキストが一時的に大きく表示されています。このおかげでユーザーがなにが起こっているのかわからずに、置いて行かれてしまうことがありません。
まとめ
マイクロインタラクションはあまり重要でないデザインディテールだと思われがちですが、実際にはユーザー体験にプラスの影響を与えることができるものです。
ブランド体験の改善からユーザーの混乱を防ぐことまでできるマイクロインタラクションは、ユーザビリティ強化に繋がる道なのです。
