マイクロインタラクションとは?エンゲージメント向上に欠かせないディティール

優れた製品の条件は、オリジナリティがあること、そしてディテールが作り込まれていることです。オリジナリティは人々の興味を引きつけますが、丁寧なディティールはユーザーをキープできます。

その一翼を担うのが、マイクロインタラクションです。この記事ではマイクロインタラクションの基本といくつかのポイントをご紹介したいと思います。

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

アプリやWebサービスを利用するとき、ユーザーは小さなタスクを絶えず行なっています。そのひとつひとつの瞬間に生まれる、ユーザーとサービス間の相互作用を『マイクロインタラクション』と呼びます。

主な用途は次のようなものです。

  • アクションに対するフィードバックをする。
  • タスクを完了を伝える。
  • 直接操作している実感をもたせる。
  • アクションの結果を視覚的に表示してエラーを防ぐ。

Favorite micro interaction
Mattia Astorino / dribbble

マイクロインタラクションはユーザーを刺激し、飽きさせない

マイクロインタラクションを採用すべき理由は、それはユーザーの承認欲求を満たせるからです。

タスクを完了するごとに視覚的や感覚的なフィードバックをもらうことで、ユーザーはギフトをもらったような気分になり、もっとコミュニケーションをとりたいと思うようになります。

また、アプリの使い方もマイクロインタラクションでそれとなく示すことができます。

マイクロインタラクションの使い方

マイクロインタラクションは幅広いシチュエーションで使えます。よく使われるシチュエーションは、逆にいうと使うのを検討すべきシチュエーションです。ここでは、一般的な使い方をご紹介します、

1. システムステータスの表示

アプリ内で何らかのプロセスが進行中である場合、ユーザーにその進行状況を知らせることはとても大切です。

特に、プロセスに少し時間がかかってしまい瞬時に結果が表示できそうにないという時は、必ずステータスを表示しましょう。

たとえば、ダウンロードやアップロードする時はこのような表示ができます。

Download
xjw / dribbble

もしくは、進行状況をスクロール方式で表示することもできます。

Scroll

ポイントはユーザーを退屈させないこと。そして情報を多く表示して現在の状況を常に表示し続けましょう。ローディングバーは、ユーザーの注意を引きやすく混乱も防げます。

2. 変化をハイライトする

何が起きたのかをユーザーに知らせる必要がある時には、通知機能を使いましょう。アニメーションでも大丈夫です。

未読メールが増えたときなど、ユーザーが大事なことを見逃してしまうのを防ぎましょう。

Mail
Russ Rosenberg / dribbble

ポイントは、インタラクティブな要素以外をシンプルにすること。アニメーションエフェクトはユーザーの注意を引く時や、大事なお知らせをする時だけに使うと効果的です。

3. 前後関係をわかりやすくする

モーションを使って、スムーズなナビゲーションや、変更点の説明を行いましょう。特に、モバイル機器やスマートウォッチでは、その小さい画面に多くの情報は入りきりません。動きを使って情報を表すことで、使いやすいインターフェイスを可能にします。

前後関係を明らかに

ポイントは、異なるページ間を移動する際、クリアーなナビゲーションを使って何がどこから出てきたのかはっきりさせること。スムーズで自然な移り変わりを目指しましょう。

また、インタラクションのテーマを統一することで全体的に一体感が出て、使いやすさが改善します。

4. 入力を可視化する

データ入力はどのアプリでも行われることだと思います。マイクロインタラクションを使うことで、このプロセスを特別なものにしてみましょう。

進捗をわかりやすく
Ramakrishna V / dribbble

ポイント: 情報の表示を上手にすることで、ユーザーのタスクの完了を補助する。

5. CTA(行動喚起)

マイクロインタラクションには、感情に訴えかけてユーザーの行動を喚起する力があります。そしてこれをスムーズに行うために、適切なアニメーションを使いましょう。長い目で見ることを忘れずに、100回繰り返しみても気に障らないような、控えめでクリアーなデザインを心がけましょう。

Click me

ポイント: ユーザーインタラクションに大きな影響を与えるユーザーの感情面について考えましょう。前後関係をわきまえた、繰り返し使えるデザインを探しましょう。

まとめ

  1. マイクロインタラクションとは、フィードバックや通知、インストラクションなどを通して円滑なやりとりを促進するもの。
  2. ユーザーを飽きさせないように、しかし邪魔もしない程度に情報を示すことで、時間の節約ができるようになる。
  3. ユーザーが誰かと、前後の関係を知ることによって、より正確で効果的なマイクロインタラクションができるようになる。
  4. 長い間繰り返し使われることを前提にしなければならない。最初の一回は面白くても、100回後にイライラするようなデザインではダメ。
  5. 思いやりや人間性が感じられるデザインと、視覚的な見た目の良さにフォーカスする。まるで生きているかのようなやりとりを心がける。

マイクロインタラクションは、細心の注意を払いつつデザインに取り掛かる必要があります。ユーザーがアプリを使う様子やシチュエーションを常に考えながら、思いやりを込めながら使いやすさを追求することが大切です。

ひとつひとつの細部を大切に、人とコンピューターとのやりとりをスムーズに変えて行きましょう。

(翻訳:Juri Ando)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ