Sジブンノート

『マイクロインタラクション―UI/UXデザインの神が宿る細部』を読みました。

マイクロインタラクションという言葉をネットで見かけて、興味を持ちました。 詳しく知るには書籍が最適だと思い、オライリー社の『マイクロインタラクション ―UI/UXデザインの神が宿る細部』を読みました。

本書を通じて、細部にこだわることで、「仕方なく使う」から「次も使いたくなる」Webサービスを目指したいと感じました。 以下は、本書を読んで感じたことや学んだことをまとめたものです。

iPhoneのアラーム

本書で特に印象的だったのは、コンサート会場でのアラームのエピソードです。 ある人がiPhoneを消音モードにしていたにもかかわらず、コンサート中にアラームが鳴ってしまいました。 その結果、周囲の人に迷惑をかけてしまいました。

私も昔、iPhoneユーザーだったので、この状況には共感できます。

「消音モードにしたのに、なぜアラームが鳴るの？」と不思議に思う人も多いでしょう。 これはiPhoneの仕様の一つですが、実際に経験しないと気づきにくいかもしれません。

このケースは、マイクロインタラクションにおける「フィードバック」が適切でない例と言えます。

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

マイクロインタラクションとは、製品やサービスにおける最小単位のインタラクションを指します。 具体的には、ユーザーとシステム間の相互作用や、ユーザー同士のやり取りの最小単位を意味します。

例えば、ECサイトで商品ページで「カートに入れる」ボタンをクリックすると、カートアイコンの数字が1つ増える動作があります。 このとき、商品画像がカートに向かって入るアニメーションが加わると、より直感的な体験になります。

このマイクロインタラクションは、「ショッピングカートに商品を追加した」ということを視覚的に伝える役割を果たします。 こうした仕組みは、良いマイクロインタラクションの例といえます。

マイクロインタラクションの構成要素

マイクロインタラクションは、以下の4つの要素で構成されています。

  1. トリガー
    • インタラクションのきっかけとなるもの。
    • ユーザーの操作（手動トリガー）やシステムの状態変化（システムトリガー）によって起動します。
  2. ルール
    • トリガーによって開始されたインタラクションがどのように動作するかを決定する指針です。
  3. フィードバック
    • ユーザーにインタラクションの結果や進行状況を伝える情報です。視覚的、聴覚的、触覚的な手段で提供されます。
  4. ループとモード
    • インタラクションの繰り返しや状態変化を管理する要素です。ループはインタラクションの繰り返しサイクルを、モードは特定の条件下での動作状態を指します。

iPhoneの消音モードの例に戻ると、「消音スイッチをONにする」というトリガーに対して、「消音アイコンを画面に表示する」というフィードバックは提供されています。 しかし、「消音モード中でもアラーム音は鳴る」というルールがユーザーに適切に伝わっていないため、意図しないユーザー体験が生じることがあります。 このように、フィードバックが不十分だと、ユーザーに混乱や不便をもたらす可能性があります。

Webサービスにおけるマイクロインタラクション

Webサービスには、多くのマイクロインタラクションが存在します。 しかし、多くのWebサービスでは、基本的な機能の開発が優先され、マイクロインタラクションの実装は後回しにされがちです。 その結果、「とりあえず動くから良い」という状態でリリースされることも少なくありません。

マイクロインタラクションが不十分だと、ユーザーは無意識のうちに「使いにくい」「魅力に欠ける」と感じてしまうのかなと思います。 例えば、以下のようなケースが考えられます。

  • エラーメッセージの不足
    • フォーム送信後、「エラーがありました」とだけ表示される
    • 対策: エラー箇所を明示し、「◯◯を修正してください」と具体的にフィードバックする
  • 検索結果が見つからない場合
    • ECサイトで検索しても「該当なし」と表示される
    • 対策: 「もしかして◯◯ですか？」などの検索候補を提示し、修正を促す

一方で、細部までこだわったマイクロインタラクションを導入することで、他のサービスと差別化された「次も使いたくなる」体験を提供できるでしょう。 ユーザーが行った操作に対して、直感的にフィードバックが返ってきて、次のアクションがスムーズに進められると、快適に感じます。

では、具体的にどのような場面でマイクロインタラクションが活きるのか、考えてみると面白いかもしれません。 たとえば、以下のような状況では、どのような工夫ができるでしょうか？考えてみるとよいでしょう。

  • 処理時間が長い場合
    • 動画配信サイトで動画をアップロードしたとき
    • ECサイトで商品検索をしたとき
  • フォームの入力時
    • メールアドレスを入力したとき
    • 送信ボタンを押したとき
  • 通知の受け取り時
    • 投稿したコンテンツに「いいね」を送った・もらったとき
    • 購読していた記事が編集されたお知らせを受け取ったとき
  • 支払い時
    • クレジットカード情報を入力したとき
    • 支払い方法としてポイント利用を選択したとき
  • チャットの利用時
    • チャットルームで入力したとき
    • デフォルト言語以外でメッセージを受信したとき

終わりに

もともと、マイクロインタラクションという言葉には、「いいね」ボタンを押したときの鮮やかなエフェクトのような、見た目の演出を指す印象がありました。 しかし、本書を読んで、それはあくまでフィードバックの表現方法の一つに過ぎないと気づきました。

本当に大切なのは、ユーザーがインタラクションを行った結果、何が起こったのかをわかりやすく伝えることです。 フィードバックが適切であれば、ユーザーは迷うことなく次のアクションを取れます。

視覚的なフィードバックは直感的に理解しやすいため、鮮やかなエフェクトも効果的なアイデアの一つでしょう。 個人的には、noteの「いいね」ボタンの演出が楽しく、心地よいと感じます。