心地よいUXとは?マイクロインタラクションを取り入れてWebデザインを改善!

心地よいUXとは?マイクロインタラクションを取り入れてWebデザインを改善!

マイクロインタラクションとは、ユーザーとのコミュニケーション手法のひとつ。閲覧しやすいと感じるページや読みやすいコンテンツには必ず、マイクロインタラクションが活用されています。

今回は、マイクロインタラクションとはどのようなものか解説し、WebサイトやモバイルアプリのUXにどのように取り入れて行くべきかをご案内します。

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

見る、読む、といった行為は単純なタスク。特にWeb上での単純行動はユーザーにとって「やらなくてもいいもの」です。単純行動を魅力的に感じさせるためのテクニックが、マイクロインタラクションを取り入れること。マイクロインタラクションは、Webサイトやモバイルアプリで使われています。

facebookやinstagramのような、ここちよくてずっと使ってしまうアプリでは、すべてタスクに対して、マイクロインタラクションが取り入れられています。

マイクロインタラクションのコミュニケーションって?

アプリやWebサイトの働きかけで、好感を持ってしまったことはありませんか?例えばGoogleマップは州境をすぎると「新しい州に入りました」とメッセージを伝えます。また、Instagramではスクリーンショットを撮るとシェアを促す通知が表示されます。これが、マイクロインタラクションです。

プロダクトデザイナーのダン・サッファーが書いたマイクロインタラクションの本に、マイクロインタラクションの構造について書かれています。

マイクロインタラクションの効果的な要素は4つあります。

  • トリガー:トリガーはマイクロインタラクションのきっかけを意味しています。
  • ルール:クリック、スワイプ、タップ、プルのアクションにマイクロインタラクションを適応します。
  • フィードバック:何が起きたのかをユーザーにフィードバックとして返します。アニメーションやポップアップのような通知が使用されることが多いです。
  • ルールとモード:ループとモードは、マイクロインタラクションの長さを決めます。 リピートとするのか、時間とともに変化するかを選択します。

マイクロインタラクション

マイクロインタラクションを使うタイミング

どのようなタイミングでマイクロインタラクションを使うと効果的なのでしょうか。適切な場面で用いらなければ、単純に画面が重くなってしまったり、かえってストレスを与えてしまったりと、UXを下げる原因になってしまいます。

1. アクションへのフィードバックとしてのマイクロインタラクション

「アクションを受け取りましたよ」という返答を可視化することで、双方向のコミュニケーションが成り立ちます。

たとえば『曲を変える』、『曲をスキップする』のようなアクションに対してもマイクロインタラクションを追加するチャンスです。ユーザーが押したボタンが凹んだジェスチャーを見せれば、「指示を受け取りました」というコミュニケーションになるのです。

2. タスクが完了したことを知らせる

設定変更やスマートフォンのロック解除、カートへ商品を追加する、オンオフの切り替え、何かを共有する、ひとつのタスクを終わらせるデバイスを接続する…このようなアクションに対してマイクロインタラクションは効果的に働きます。

マイクロインタラクションは、ユーザーの行動をサポートする方法でもあります。フィードバックや行動の結果を提供し、ユーザーの操作を助けています。

マイクロインタラクションをデザインする方法

次は、どのようにデザインすると良いのかを説明します。

シンプルにデザインする

シンプルであることを心がけてください。マイクロインタラクションが複雑だと、ユーザーの混乱を招きかねません。

インタラクションを使用するときはデータの通信が発生するため、トリッキーなものを避けシンプルにするよう心がけてください。それにより、データ通信量が節約できるのでパフォーマンスも上がります。

淡々としたインタラクションを使用するのではなく、そのインタラクションがどのような価値と意味を与えられるのか意識してください。価値と意味が固まってからデザインを始めてください。

一貫性を守る

マイクロインタラクションは、ユーザーを喜ばせる必要はありますが主張をしすぎないことも大事です。アプリのスタンスをはっきりさせれば、それに沿ったコミュニケーションのとりかたが見えてくるはずです。

たとえば、カラーパレットやWebサイトやアプリのガイドがあるなら活用し、テーマがあればテーマに従って制作します。インタラクションとコピーを組み合わせて一貫性を保つことにより効果的に機能します。

なぜなくてはならないのかを考える

マイクロインタラクションが『なぜなくてはならないのか』は、体験を楽しくデザインするためです。
しかし、忘れてはならないのが『目的に沿っているか』どうかです。

デザインの見た目を優先させると、UXが低下することがあるので注意してください。マイクロインタラクションが与えてくれるガイドがない場合は、ユーザーが使い方に不快感を持つ可能性もあります。

プロトタイプ

あなたがいいアイデアを持っていたとしても、他の人に伝えなければ意味がありません。そのために適しているのがプロトタイプです。プロトタイプは、簡単にテストとリセット、再テストを繰り返し行うことができます。

まとめ

マイクロインタラクションは、UXデザインでも価値を作る重要な部分です。

マイクロインタラクションのデザインで大切なポイントは、詳細に注意を払いUXを損なわずに向上させることです。あまりにも小さいメッセージは退屈なものとして感じさせることがあります。

適切なマイクロインタラクションは、Webサイトやアプリの利用を快適にしますが、不快なものであった場合は使用を遠ざけます。

マイクロインタラクションは単純で慣習的に過ぎ去るメッセージのことではありません。マイクロインタラクションには、重要な役割があることを覚えデザインしてみてください。

(翻訳:Yuri Tanaka)

SHARE

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