UXを高めるマイクロインタラクションとは？
心地よい操作性に重要な「マイクロインタラクション」
以前からWeb制作において「マイクロインタラクション」が注目されています。
ユーザーがWebサイトでアクションを起こしたら、サイトからもそれに応じた反応が返ってきますよね。
「リンクボタンにカーソルを合わせると色が変わる」「ダウンロードするとゲージが表示される」等、ユーザーの行動でサイト上に変化が起こります。
マウスオーバーのエフェクトで「ここはクリックできる」と予想がつきますし、ローディングアニメーションが表示されれば待時間であることが分かります。
このように、ユーザーの行動に対して何かしらの変化で状況をわかりやすくユーザーに伝える、細かな配慮のデザインが「マイクロインタラクション」です。小さなアニメーション等のちょっとした反応でも、その積み重ねがユーザーの行動を円滑で心地よいものにしていきます。
マイクロインタラクションのメリット
マイクロインタラクションを上手に取り入れることで、どのようなメリットが生じるのでしょうか。期待できる効果をピックアップしました。
- 行動へのフィードバック。ユーザーがどのような状況にあるのか理解しやすくなる
- 視線の誘導。次の行動をサポートし直感的な操作を行いやすくする
- なめらかなアニメーションは見ていても心地いい。好感を与える
- ローディングアニメーションの表示でストレスを緩和、離脱率を下げる
- 反応が返ってくること、コントロールしていることへの満足感を与える
ユーザーの目的達成が面倒なく、すんなり進めば満足度が高まりますね。
操作が楽しい、アニメーションが魅力的等、ユーザーの感情を動かすことで記憶に残し、ブランディングにもなります。
マイクロインタラクション一例
- 開くとアニメーションで表示が変わるハンバーガーメニュー
- 状況を伝えるローディングアニメーション
- スクロールやダウンロード等行動を促す、視線を集めるアニメーションボタン
- フォーム入力時のエラー表示等
- Twitterのいいねボタン 押すと小さくアニメーションが再生
- ボタン、画像リンク等のオンマウスのエフェクト
- スクロールにあわせたアニメーション 他
細かな部分の気配りで操作性、満足度を大きく向上させることができます。
ちょっとしたアニメーションが好感やストレス軽減につながれば嬉しいですね。
下記は簡単な動きのマイクロインタラクションの一例です。
こちらのページWebサイトのアニメーションでもマイクロインタラクションとして取り入れられるアニメーションをご紹介しています。
マイクロインタラクションの注意点
- ユーザーの行動を妨げない必要最低限のシンプルな動きにする
- 長すぎるアニメーションは待ち時間がストレスに
マイクロインタラクションはユーザー中心で考えるユーザーセンタード・デザイン（UCD）のひとつです。
ユーザーがどのようにサイトを使用するのか、ユーザーの課題を解決しやすい設計、要求を満たすデザインを考えます。
サイトの統一感を損ねたり、必要のないところに、ユーザーの行動の流れを止めてしまう要素を配置しないよう気をつけます。
おわりに
「ボタンを押しても反応がない」「ページ読み込みが長く退屈」「フォームを送信できたのか不安」
サイトでのこのような経験はありませんか。反応が予測に反したサイトはユーザーに使いづらさを感じさせイライラさせてしまうでしょう。行動がストップされ、不信感につながることも考えられます。
反対に、はじめてアクセスしたサイトなのに「操作しやすく快適」なら、また訪れたくなりますね。
対象となるユーザーを理解し、どのようなマイクロインタラクションを導入するのか追求していくことがサイトの差別化にもつながります。ささいなこと小さなことでも、その積み重ねで「使いやすい」サイトになっていきます。ユーザー体験がより豊かになるような効果をぜひ取り入れていきたいですね。
また、アニメーション等が流れに合わない場合、かえって違和感や混乱となってしまうこともあります。デザインに疑問を持ち、本当にユーザーにとって必要かどうか、細かな設計に気をつけて制作を行っていきたいです。
無料相談
