マイクロインタラクションとは？アプリ開発でUI/UXを向上させるポイント
マイクロインタラクションは、ユーザーの操作に合わせてアプリを反応させる最小単位の仕組みをいいます。効果的に使うことによってUI/UXを改善し、ユーザビリティを向上させることができます。マイクロインタラクションの事例、アプリ開発における設計のポイントを解説します。
マイクロインタラクションとは？
アプリはユーザーのタスクに対して処理を行い、結果をユーザーにフィードバックします。この最小単位をマイクロインタラクションと呼びます。
インタラクション（interaction）は「相互作用」という意味です。ユーザーの操作に対してアプリやハードウェアが反応するひとつひとつが、ユーザー体験を豊かにします。どのようなタイミングで反応し、どのような演出をするのか、インタラクションをデザインすることによってユーザビリティが高まります。
たとえば、SNSで「いいね！」を押したときやECサイトでかごに入れたときにマークが反転して輝く、画像をコピーするとシェアのメニューを表示させるといったものなどがマイクロインタラクションの一例です。機能全体に大きな影響を及ぼすものではありませんが、ささやかな感動や喜びを繰り返し積み重ねてもらうことが大切です。
マイクロインタラクションの種類と効果
マイクロインタラクションを反応させるタイミングや目的から種類と効果を整理します。既に当たり前のように実装されているインタラクションもありますが、あらためて表現方法や演出を見直すことにより、アプリの操作性を高めるアイデアを拡げることができます。
マイクロインタラクションを次の8つの目的で分類しました。
処理のプロセスを伝えて不安を取り除く
ダウンロードの進行状態を示すプログレスバー、読み込みを示すローディングインジケーターなど進行中のプロセスを示すインタラクションです。このインタラクションがない場合、「フリーズを起こしているのでは？」と不安になります。いまどこまで処理が進行中なのか、システムの進捗を誠実にユーザーに伝える透明性が求められます。表現方法としては以下があります。
・横棒で示されるバー
・円グラフ
・キャラクターなどのアニメーション
処理のステイタスを表示して確認を促する
ステイタス（状態）を示すインタラクションです。たとえば、スマートフォンの設定機能に使われているトグルボタンがあります。オンとオフを切り替えるボタンで、右に動かすとグレイの状態から緑色に変わってオンになります。読み込みに時間がかかる設定では、ボタンにローディングのアニメーションを追加することもできます。
コンテンツを更新する際に画面を引き下げて、リロード中に回転するスピナーもステイタス表示のひとつです。ただし、読み込みに時間がかかる場合は、進捗状況を伝えるプログレスバーを追加したほうがユーザーのイライラを軽減させます。
パスワード入力画面では、入力した文字数に合わせてセキュリティの安全性が表示されます。文字数が少ない状態では安全とはいえないため、安全な状態まで入力を促します。タスクが完了したときにチェックのアニメーションを表示させるデザインもステイタスを表示させるインタラクションです。
iOSの場合、ホーム画面でアイコンを長押しすると、アイコンが揺れると同時に、それぞれのアイコンの左上に削除可能であることを示すバツの表示をします。これは「アプリの移動と削除ができます」というスタンバイの状態を表示するインタラクションであり、ステイタスは単に表示するだけでなく、次の行動を促すきっかけ（トリガー）としても使えます。
ユーザーの選択を動きで演出して楽しませる
PCのWebサイトでは、マウスオーバー（マウスのカーソルをのせる）によってメニューを反転させたり、画像が変わったりするアニメーショが使われています。たとえば、人物写真の画像がすました顔から驚いた顔に変化するような演出です。さまざまな画像の変化を楽しませて、その画面の滞在時間を増やすことができます。
階層や前後関係の順序を示して現在の操作を明らかにする
コンテンツやメニューがレイヤー（階層）の構造になっているとき、ユーザーの操作した画面が前面に切り替わります。利用しようとする機能を前面に出して、その他の情報を背面に隠すなどの表示によってアクティブな機能を切り替えます。スマートフォンの画面はPCと比べて狭いため同時に２つのウインドウを開くことが困難ですが、前後に配置するようなデザインを使うことで立体的な操作性を実現します。
入力のミスを指摘して訂正を促す
パスワードの入力画面などで、入力に合わせて伏せられた文字が表示されます。入力にエラーがあった場合、その状態で間違いがあったことをフィードバックするマイクロインタラクションは、リアルタイムバリデーションと呼ばれます。
一般的には入力した後に、確認などのボタンを押さなければ入力に間違いがあったことが分かりません。しかし、すべてを入力した後に間違い指摘されると、ユーザーには大きなストレスになります。リアルタイムバリデーションは、最初からやり直しというストレスを軽減することによって、ユーザビリティを向上させます。
次の操作を喚起して使いやすくする
タップやクリックをさせる動機づけ、操作の喚起のためにもマイクロインタラクションを使うことができます。アニメーションなどを使って感情に訴えかけると効果があります。初めてアプリを使うユーザーに対して、実際に操作しながら操作を教えるオンラインのチュートリアル・マニュアルにも使えます。ある操作の完了とともに次に操作するボタンの場所で矢印を点滅させて誘導する手法が考えられます。
通知を繰り返すことでユーザーの行動を習慣化する
スマートフォンのプッシュ通知はユーザーをアプリに誘導するために重要な役割を果たす機能のひとつです。また、通知の件数によってアイコンを変化させることにより、未読の情報を読ませる効果があります。
ユーザーがアプリを利用するきっかけになることはもちろん、通知を見たらアプリを開くという行動の習慣化を促します。通知を見てアプリを開いたときにインセンティブを与える仕組みを作ると、継続的な利用促進になります。行動をループさせて習慣を作る上でもマイクロインタラクションは役立ちます。
エラーをフィードバックしてユーザーに理解させる
エラーメッセージを表示して、どのような状態にあるかをアプリがユーザーに知らせます。このとき触感的な効果をフィードバックする方法もあります。
視覚的要素だけでなく、スマートフォンやゲーム機のコントローラーでは振動させるインタラクションを備えています。シューティングゲームでは敵にやられたときに振動してショックを伝えます。スマートフォンの認証が失敗したときに振動するインタラクションも効果的です。画面の反応だけでなく、マイクロインタラクションにはハードウェアの機能を使った触感的な反応もあります。
マイクロインタラクションの設計ポイント
マイクロインタラクションを設計するときには、ユーザーの操作とアプリの反応の流れを考えて設計するとよいでしょう。その上で直感的に分かりやすいこと、操作が自然であることに配慮し、楽しさを演出していきます。
トリガー、ルール、フィードバックを設計する
マイクロインタラクションの設計するときには、トリガー、ルール、フィードバックという３つの段階に分けて考えます。
トリガー（trigger）は引き金の意味であり、ユーザーのアクションにともなってマイクロインタラクションを開始します。この場合は手動トリガーと呼ばれます。たとえば、アプリのアイコンは起動させるためのトリガーのひとつです。一方で、時間や場所、天候などによって発生させるトリガーをシステムトリガーといいます。
次にルールは、マイクロインタラクションを起動するタイミング、アルゴリズム、パラメーターなどの設計です。最小単位の相互作用であることから、なるべくミニマムであることがベストです。言葉による補足が必要な場合は、マイクロコピーとして短く効果的な言葉を加えてもよいでしょう。
最後にフィードバックは、ユーザーに対するリアクションです。操作によって何が処理されたか、どのような結果が導かれたか、次に操作すべきものは何かなどをフィードバックとしてユーザーに返します。この場合にもフィードバックは最小単位であることが重要です。
トリガーからルールで処理され、フィードバックを返すという流れを繰り返す（ループ）させることでユーザーに定着させます。
直感的に分かりやすく、自然な流れを生み出す
UXは直感的に分かりやすいデザインが基本です。直感的に分かりやすいとは、ユーザーの行動に沿った流れであることといえるでしょう。たとえば、一般的にユーザーの視線は左から右に、上から下に流れます。この視線の流れに合わせたインタラクションをデザインすることが大切です。流れに逆らった操作を要求するような場合に、アニメーションなどで注目させて「次はここを操作します」と教えると効果があります。
マイクロインタラクションは、デザインと一体化させることがポイントです。ユーザーが操作するストーリーにしたがって自然な流れを作ります。キャンペーンへの誘導などでは奇抜なインタラクションが必要とされるケースもありますが、長く使い続けると過剰な演出がじゃまに感じるようになります。
快適さや楽しさを演出する
遊び心のあるインタラクションは利用する楽しさを生み出します。しかし、あまりにも目立ちすぎると利用者にストレスを感じさせるので、適度な遊びを加えるとよいでしょう。
ふっと笑ってしまったり、癒やされたりするようなユーモアのあるアニメーションはユーザーの好感を生みます。といってもユーザーは、何度も見慣れてしまうと飽きてしまいます。利用者の心理として仕方がありませんが、同じコンセプトで別のバージョンを切り替えたり、季節ごとのイベントを盛り上げたり、ユーザーを飽きさせないアイデアを工夫すべきです。
快適さや楽しさはユーザーによって異なります。ただし、アプリの世界観や価値観を打ち出すことができれば、長期的に利用を続けてもらえるファンを作れます。
現実のメタファを使う
直感的に分かりやすい、自然な流れを作るポイントに重なりますが、現実に存在するもののメタファを使うテクニックもあります。
メタファは、何かになぞらえた比喩表現です。たとえば、本をめくる、ドアを開ける、鍵をかける、ゴミ箱に捨てるといった現実の行為をアプリ内の操作に比喩的に使って演出します。ユーザーインターフェースのデザインとしては基本ですが、触れると震える、フリックすると消えるなどによって操作性を高めるだけでなく、ユーザー体験を豊かにできます。
効果的なマイクロインタラクションのアイデア
最後に、これまで触れてきた内容を踏まえながら、効果的なマイクロインタラクションを考える上で参考になるアイデアを挙げます。
アニメーション
単にアニメーションを画面に加えるだけのデザインは、マイクロインタラクションとはいえません。なぜなら、ユーザーの操作に紐づいていないからです。画面の切り替え（トランジション）を滑らかにしたり、指を離すとバウンドしたり、何かの操作に合わせたアニメーションがマイクロインタラクションです。
Webサイトのデザインでは、iPhoneのWebサイトをはじめ、スクロールに合わせてパララックス（視差効果）で演出されたページがあります。遠景と近景の速度を変えることで、まるで乗り物の窓から風景を眺めているような気分を楽しめます。
不可視トリガー
ボタンなしでもユーザーのアクションによって現れる反応を不可視トリガーといます。Facebookでは「いいね！」を長押しすると親指のマークが巨大化します。また、iOSのホームボタン長押しでアプリの移動や削除ができる状態になります。このように何かの操作を続けることで、機能が変化するマイクロインタラクションが不可視トリガーです。
操作の取り消し
G-mailにはメールを送信した後に取り消す機能があります。また、iOS 16からメール送信の取り消し機能が追加されました。このようなメール送信後に取り消しのメニューを表示させることは、効果的なマイクロインタラクションです。SNSでは削除したコメント復活させる機能もあります。
操作を動機付けるインタラクションのほかに「その操作を行った後でユーザーが後悔するのは何か」「その次に促すユーザーの操作は何か」を考察することもマイクロインタラクションを設計するヒントになります。
まとめ
UI/UXの分野で、マイクロインタラクションは注目されています。UXを向上させるために有効ですが、アプリの設計段階では付加価値的な要素で優先度が低いのではないでしょうか。実装のためには技術理解とともに演出を含めたデザインが必要です。ペンタゴンには、UI/UXデザイナーによる多様な実績があります。マイクロインタラクションに関心のある方は、ペンタゴンにご相談ください。