THE BRIDGE

Nick Babichさんによる寄稿記事です。ソフトウェアエンジニア、テクノロジーの熱狂的な支持者。UI/UXに夢中。ソフトウェア開発、マネージメント、生産性などなどについて執筆している。Twitter アカウントは、@101babich。本記事は、Mediumへの投稿記事を許可を得て翻訳したものです。元の英語記事もどうぞ。

---

最高のプロダクトは、2つのことで秀でている：機能とディティール（細部）だ。機能によって人はプロダクトに魅力を感じ、ディティールによって、それを使い続ける。このディティールこそ、特定のアプリが競合から抜きん出る理由だと言える。

マイクロインタラクションは、ユーザーに対して快適なフィードバックを返すために有効なテクニックのひとつだ。

あらゆる道は、人間中心設計のデザインアプローチへと続いている。そこで最優先されるのは、ほかならぬ、ユーザーだ。頻繁に、付属や二次的要素だと考えられているマイクロインタラクションだが、それを発見したユーザーに幸福感をもたらす。

デザイナーが、マイクロインタラクションの不可視性を認識することは、それをデザインすることと同じくらい重要だ。タスクを遂行するのはもちろん、それを人間らしく自然に実現できるものを作らなければいけない。

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

マイクロインタラクションは、プロダクトの中の「小さなタスクをこなす」要素のことを指す。

Dan Safferの著書「Microinteractions」で初めて定義されたように、これらの些細なディティールは、典型的に以下のような重要な機能を果たす：

• フィードバックまたはアクションの結果を返す
• 個別のタスクを遂行する
• 直接的に操作している感覚を強化する
• ユーザーがとったアクションの結果を可視化し、エラーを防止する

具体的なマイクロインタラクションの例には：

• iPhoneをミュートに設定した時の振動による通知と、サイレントモードのアイコン表示

• クリック可能であることを示すインタフェースアニメーション（例：マウスオーバーするとボタンの色が変わるなど）

マイクロインタラクションが効果的な理由

マイクロインタラクションが機能する理由は、それがユーザーが自然に持っている承認欲求に応えるからだ。ユーザーは、自分がとったアクションが受け入れられたことを一瞬にして感じ、その承認が視覚的に表現されることを好む。

マイクロインタラクションはまた、システムの使い方についてユーザーを指導することができる。

機会を特定する

マイクロインタラクションの魅力のひとつは、あらゆるアクションに適宜挿入できることだ。ただし、以下のような領域で目にすることが多い：

システムのステータスを表示する

ヤコブ・ニールセンのヒューリスティックなユーザビリティにおける第一原則にはこうある：ユーザーに対して、今起きていることを常に知らせること。ユーザーは、瞬時の反応を期待している。しかし、状況によって、アクション完了までに多少の時間を要することがある。

だから、インタフェースには、今起きていることについてユーザーに教えることが求められる。

また、ユーザーがどこにいるかも教えよう：

教訓：ユーザーを飽きさせないこと。ユーザーに情報を共有し、進捗を知らせよう（例：ローディングバーは、ユーザーをエンゲージするだけでなく、混乱を防いでくれる）。

変化を強調する

時には、ユーザーに確実に気がついてもらうために何かしらの通知する必要がある。アニメーションは有効だ。ユーザーの注意を引き、こちらが重要だと考えることが見過ごされずに済む。

教訓：多くの場合、アニメーションエフェクトは、重要な要素にユーザーの注意を向けるために使われる。KISS の原則を活用するといいーマイクロインタラクションは、些細でシンプルに保たれるべきだ。

コンテキストを維持する

モーションを使うことでユーザーを誘導し、画面上の要素にある変化について説明しよう。特にこれはモバイルデバイスやスマートウォッチにおいて重要だ。小さなスクリーンに入る情報量は限られているからだ。

教訓：ページ間に明確なナビゲーションを設けること。何がどこから出てきたものなのか、ユーザーが把握できるように。画面から画面に移行する際、それは明確でスムーズ、そして容易であるべきだ。すべてのインタラクションを紐付けてまとめる、一貫したテーマを設けよう。

インプットを可視化する

いかなるアプリケーションにおいても、データ入力は最重要な要素のひとつだと言える。マイクロインタラクションが、このプロセスを特別なものにしてくれる。既存の要素を使うことで、ユーザーに対してフィードバックを返すことができる。

教訓：マイクロインタラクションは、情報を明らかにし、ユーザーの目的を達成する後押しをしてくれる。

行動喚起

マイクロインタラクションは、ユーザーがアプリと積極的にインタラクションをとることを促してくれる。それは、ユーザーエクスペリエンスにエンパシー（共感）をもたらす。

ただし、視覚的なヒントとアニメーションには、自分たちのユーザーに適したものを使うように。また、継続利用を念頭に置き、例えば、100回目に使う時にそれが邪魔にならないか、また全体的にクリアででしゃばっていないかを確認しよう。

教訓：ユーザーインタラクションで重要な役割を果たす、ユーザーの感情にフォーカスしよう。コンテキストとユーザー調査からそれらを導き出し、継続利用を念頭に置いてデザインすることが大切だ。

覚えておくべきこと：

• マイクロインタラクションは、フィードバック・通知・ガイドを使うことで、インタラクションの促進薬となる。
• マイクロインタラクションは、ユーザーを邪魔したり飽きさせずに情報を瞬時に伝えることで、時間の節約に繋がるべきだ。いたずらなウィンクのように、ユーザーの注意を引くことが求められる。
• ユーザーを知り、マイクロインタラクションの裏側にあるコンテキストを理解することが、マイクロインタラクションをより的確かつ効果的にしてくれる。
• マイクロインタラクションは、継続利用を生き延びなければいけない。初回利用時に楽しいと感じたことも、100回それを繰り返すと邪魔に感じるかもしれない。
• マイクロインタラクションに人間らしさを加え、視覚的な調和にフォーカスすること。マイクロインタラクションに息を吹き込むためには、流れるようなモーションに感じられる必要がある。

結論

ケアを持ってデザインすること。人がデバイスと接する方法、それをどう使っているかについて塾考しよう。その上で、これらの細かな要素をデザインする際には、思考に共通するパターンを真似することが大切だ。

人間中心設計に基づく使いやすいインタラクションを叶えるためには、すべての細部に注意を向ける必要がある。素晴らしいデザインは、機能からマイクロインタラクションまで、一貫して実現されなければいけない。

（翻訳：三橋ゆか里）