「好き」を促すマイクロインタラクションを考える

こんにちは、デジタルプロダクトデザイナーのさだこえ (@sadako_a_) と申します。今回は以前とあるイベントに登壇した時の資料を、改めてリファインして記事にまとめてみました。

目次

マイクロインタラクションとは何か
1.無意識にストレスなく利用できるようにする
2.欲しいものをすぐに提供する
3.人間味を感じるフィードバックを与える
まとめ

マイクロインタラクションとは何か

簡単なアカウント登録フォームで考えてみましょう。ユーザー側のアカウント登録の操作をするアクションに対して、システム側のリアクションがアカウント登録の実行だった場合、その一連の過程の中では、小さいインタラクションが多数発生します。

小さいインタラクションとは、例えばチェックボックスを押したらON/OFFの状態として返ってきたり、本来入力できない文字列をフォームに入力したら、エラーが返ってくる...といったインタラクションなどがあげられます。

インタラクションとは、一般的に相互作用のことを指します。マイクロインタラクションとは、その相互作用を最小単位で切り出したインタラクションの要素です。今記事では、マイクロインタラクションをこのように定義したいと思います。

ではプロダクト上のマイクロインタラクションを、どのようなアプローチをもとに設計すればいいのか、3つのポイントに分けて考えていきたいと思います。

1.無意識にストレスなく利用できるようにする

ファイルビューワーのアプリを参考に考えてみます。とあるドキュメントを開こうとしたら、画面には読み込み中と表示されています。

ユーザーは「いつ読み込みが終わるんだろう」と思いますが、その読み込み時間が長ければ長いほど、「そもそもこのファイルは読み込まれているのか」と考えるはずです。

つまりユーザーは読み込みがされているのか知りたいのではなく、どれぐらいで読み込みが終わるのか知りたいのであり、このフィードバックは適切なマイクロインタラクションとして機能していません。

そのような問題を解決するためには、読み込みの進捗を伝えるフィードバックを、マイクロインタラクションに落とし込むのが良いでしょう。

また仮に読み込みに時間が掛かる場合は、その節をユーザーに伝えることにより、無意識にストレスなく利用できる体験に繋がると考えています。

2.欲しいものをすぐに提供する

テキストエディターのアプリを参考に考えてみます。入力したテキストを選択して、見出しやリスト項目等のスタイルをつける時、下部にその関連する機能がまとまっているとします。

一見使いやすそうに見えますが、仮に画面サイズが4kでスケーリングされている場合、たびたび上部から下部へ、マウスカーソルの移動がいったりきたりしなければならないため、少し不便に感じるかもしれません。

画面下部に機能を配置するより、テキストを選択した部分の位置でポップアップを出すことで、閲覧環境に左右されずマウスカーソルの移動量も最小限に減らすことが出来ます。(noteもこの例に当てはまりますね:D)

欲しいもの、つまりユーザーがその時に求めているものをすぐに提示し、次のアクションを起こさせることが重要だと考えます。

3.人間味を感じるフィードバックを与える

404エラーのページを参考に考えてみます。「サマーニット」と検索するところを間違って「ザマーニット」とキーワードを打ち間違えてしまった場合、検索結果には何も表示されません。

ただ、なぜ検索結果が表示されないのか、ユーザーがキーワードの打ち間違いに気づいていない可能性もありますし、システム側からのフィードバックが機械的で少し冷たい印象を抱いてしまいます。

システム側からのフィードバックに人間味を感じさせることで、ユーザーからのネガティブな印象を緩和する事ができます。

ユーザーとシステムのやり取りにおいて、ただエラーを表示するのではなく、なぜそのエラーが起きたのか、具体的な解決策まで提示してあげられると、なお良いかなと思います!

Uber Eatsの場合

余談ですが人間味を感じるフィードバックとして、Uber Eatsはとても参考になりました。Uber Eatsは配達地点が現在地と比べて遠い場合、本当にその住所に届けるかを確認するポップアップを表示してくれます。

このような人間味を感じるマイクロインタラクションが、そのプロダクトに対して好印象を抱くきっかけを生むことに繋がると思います。

まとめ

今回の記事ではプロダクトのマイクロインタラクションを、どんなアプローチをもとに設計すればいいのか、3つのポイントに分けて考えました。

「マイクロインタラクション」で検索すると、多くはアニメーションについて解説した記事がヒットします。ただ、アニメーションはマイクロインタラクションで用いられる表現の一つであり、それ自体がイコールで繋がるわけではありません。

プロダクトにマイクロインタラクションを取り入れよう!となった時に、少しでもこの記事が参考となり、ユーザー体験の向上、しいてはプロダクトのファンが増えるきっかけになれば幸いです。

ここまで読んで頂き、大変ありがとうございました。
ご意見やFBは @sadako_a_ までよろしくお願い致します。

P.S.
弊社FOLIOが提供するオンライン証券のiOS/Androidアプリを、今週リリースしました。良かったらぜひフィードバックを頂けると嬉しいです!

------------------------------------------------

SNSではUIデザインなどの情報や考察、制作物などを発信しています!🎉


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

頂いたサポートは記事執筆のための活動費や、書籍購入費用に当てさせて頂きます!💪また記事を読んで思うことがあったら、Twitterなどで感想やFBを頂けると大変うれしいです!

いつもスキありがとうございます!記事を執筆する励みになります🙋
74

MAMORU KIJIMA

「◯◯を考える」

デジタルプロダクトデザイン関係の記事をまとめています。
5つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。