説明なしでもわかるUIを実現するために！マイクロインタラクションの基本を理解しよう

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

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

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

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

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

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

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

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

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

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

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

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

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

1.トリガー

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

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

 

2.ルール

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

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

 

3.フィードバック

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

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

 

4.ループとモード

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

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

 

マイクロインタラクションを取り入れた事例

では、実際にマイクロインタラクションを取り入れた事例を見ていきましょう。
上で紹介した4つの種類を確認してから見ると、マイクロインタラクションが目指すところが見えてくるはずです。

Search app microinteractions by Lukas Horak - Dribbble
文字を入力すると裏側の仕組みで予測し検索キーワードをサジェストしてくれます。
もちろん文字を入力するだけでなく、すぐに音声検索できるようなトリガーも見やすく表示してくれています。

Like/Unlike microinteraction for Loliful.io by Igor Izhik - Dribbble
自分がいいねした時のフィードバックだけでなく、人間味のあふれる視覚的なアニメーションを提供しています。
人がよく行うような仕草を用いることで、インターネットと現実世界の隔たりをなくすことができるはずです。

Daily UI #002 - Credit Card Payment by Eszter Toth - Dribbble
必須の入力フォームを全て埋めなければ購入ボタンを押せないようになっているのはよく見る仕様です。
エラーが起きないように、起きたとしても最小限に抑えるためにユーザーに知らせる必要があるでしょう。

マイクロインタラクションを使う上で気をつけたいポイント 

マイクロインタラクションにはアニメーションが重要な要素となりますが、制作しているとアニメーションの動きの美しさに固執してしまいがちです。
ユーザーにとっての使いやすさを向上させるためのもので美しいかどうかは問題ではありません。

「とにかく美しい動きを」といったデザインを求めると無駄な部分が多くなり、初めて使うユーザーにとって困惑させる原因にもなります。
マイクロインタラクションがあることで、画面遷移に時間がかかり過ぎたり、予想と違ったアクションが起きるのは良くありません。

まとめ

日々、無意識のうちに利用できているサービスは、ストレス無く利用できている証拠です。
そのようなサービスには、ほぼ必ずマイクロインタラクション的な概念が取り入れられています。

自分自身がサービスを作る側になった時、ついユーザー視点を忘れがちになってしまいます。
マイクロインタラクションの構造を理解し、初めて利用するユーザーでも心地よく使えるサービスになっているかどうかを都度確認しながらサービス設計を進めましょう。