「マイクロインタラクション」から考えるマクロなデザイン

photo by Neal.

Lean Startupが出版された頃からでしょうか。起業ブームみたいなものと相まっていろいろとUXだとかLeanだとかの類の本が多く出版されていますね。私もそんな本を案外欠かさず買ってみては読んでみてもいるのですが、あまりピンとこないような内容であったり、手法の紹介についてばかり熱心に書いてあったりとどうしても眠い感じになってしまうようなものばかりだったように思うことが多くありました。

今回読んだ マイクロインタラクション ―UI/UXデザインの神が宿る細部 も「ドナルド・ノーマン推薦！」との煽り文句が帯に大きく書かれていて、これもそんな感じかなと思ったりもしていましたが、今までのものとはちょっと違った目線の内容だったので紹介してみようと思ったわけです。

デザイナー向けにも思われがちかもしれませんが、職人的なデザイン技術について解説しているわけではなく、プロダクトを考える上でどのようにユーザーとコミュニケーションをとっていけばいいのかという内容なので、開発に参加するエンジニアやディレクターにもぜひ読んでいただきたい本です。
具体例を多く踏まえながら解説されているので、論理的な・思想的な内容に走らず、より実践的な内容になっている点でも良書だと感じました。

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

本書のタイトルから想像するにデザイン・UIのディテールの話を中心に書いてあるのかなと軽く考えておりましたが、マイクロインタラクション（単一のシナリオに基づいて一つの作業だけをこなす最小単位のインタラクション）を通してマクロなデザイン（製品もしくは生活レベルに影響を与えるデザイン）について考えるという内容なのかなと解釈しました。

micro単位で考えるということについての利点は本書内でも「移動時間にメッセージやゲーム、データのチェックなど、必要以上に断片化してしまっている現代人の生活との親和性が高い」と述べられていますし、いつでもどこでも利用できるモバイルデバイス・ウェアラブルデバイスでは単一タスクを効率よくこなすアプリケーションの必要性というのもすごく高まっていると思います。

本書ではマイクロインタラクションを４つの構成「トリガー」「ルール」「フィードバック」「ループとモード」に分解して、それぞれについて考え方やデザイン・分析方法について書いています。

トリガー

• スイッチやスライダーなどのマイクロインタラクションを開始するためのきっかけとなるもの
• スイッチやスライダーなどのユーザーが任意的に操作する「手動トリガー」の他に、時間や位置情報やその他の条件によって自動的にインタラクションを発火させる「システムトリガー」についても解説しています

ルール

• マイクロインタラクションがどのように動作するのかという取り決め
• ライトであれば「スイッチがオンになったらオフにされるまで点灯し続ける」という簡単なルールになる
• 本書ではユーザーにとってルールが分かりやすい状態になっている（シンプルで透明性がある）ことが重要だと述べています

フィードバック

• 機器やアプリのルールに関するユーザーの理解を助ける視覚的、聴覚的、触覚的などの要素

ループとモード

• マイクロインタラクションのルールの長期的な動作に関するルール

マイクロインタラクションの導入

マイクロインタラクションの導入には３つパターンがあります

1. マイクロインタラクションをひとつひとつ個別に検討していく方法
   • すでにある構成要素が多数あるプロダクトを見直す場合に、どのようなマイクロインタラクションが存在しているか改めてリストアップし、ひとつひとつ検討して磨き上げていく
2. ひとつのマイクロインタラクションを中心にして一つの製品を作り上げる方法
   • 「たった一つの得意技を磨き上げる」「実用最小限の製品」
   • モバイルアプリケーションの多くがこれに当てはまるか、上手くいっているもののを多くがこれを起点にスタートしている
3. 多数のマイクロインタラクションを一つのデジタル製品にまとめ上げる方法
   • 一つのプロダクトを相互に関連付けられたマイクロインタラクションの集合とみなす方法

アプリケーションやサービスを開発している多くの開発者にとっては１や２が最も当てはまるやり方なのかなと思います。特にスタートアップサービスやモバイルアプリケーションにおいては「ひとつのマイクロインタラクションを中心に考える」というやり方が非常に相性良いように思います。

マイクロインタラクションと
ゴールダイレクテッドデザイン

本書では「トリガー」「ルール」「フィードバック」「ループとモード」と順序立てて解説されていますが、マイクロインタラクションにおいてもっとも重要となりデザイナーが一番頭を悩ませなければならない要素が「ルール」のデザインです。
「ルール」によってどのような「トリガー」をいつどこで提示するのが良いかということを考えるべきですし、またどのようなフィードバックを返すのかということを考える事にもなります。

そのルールを考えるのにおいて最も重要なのは「マイクロインタラクションの目的をできるだけ単純明快な言葉で定義する」ことだと本書でも述べられています。
例えば、ログインのマイクロインタラクションの目的はユーザーにパスワードを入力させることではなく、ログインさせシステムに入らせることです。すごく当たり前のことですが、何が目的であるのかということが明確になっていなければ、見せかけだけの、場合によってはぶれたデザインになってしまうと思います。マイクロインタラクションの焦点が目的に絞られていればいるほど、そのマイクロインタラクションはよりよいものになり、それが製品の品質にもつながっていきます。
これは「ゴールダイレクテッドデザイン」にも通づる話だと読んでいて感じました。一つの（最終的な）目的に焦点を絞ってそれにしたがって細部をデザインしていくことによって、最終的にはマクロな視点をも持った一つのプロダクトとしてまとめ上げることができるのだと思います。

また、「ルールはユーザーの行動を成約することになるが、ルールをルールと感じさせないことが大切」だとも言っています。一つのタスクをこなすために一連の指示に従わなければならない（ましてやそれを覚えなければならない）といった煩わしさをユーザーに感じさせないようにしなければいけません。ルールを感じさせずにそれとなくユーザーを導き、時にはユーザー自身がパワーアップしたような（楽しさを感じるような、ワクワクするような）感覚を持ってもらえるようなものにする必要があると思います。

マイクロインタラクションと
ユーザーインターフェースデザイン

本書の副題は「UI/UXデザインの神が宿る細部」（原書ではDesigning with Details）とありますが、これは「細部の装飾をきちんと描き込め」などという意味ではもちろんありません。
UIラベルの表記は正しいのか？そもそもラベルの必要性はあるのか？場合によってはそのインタラクションの一端（トリガーやフィードバック）をユーザーの目に見える形で提示する必要性があるのかということまで検討する必要があると言っています。常にユーザーが目的を達成するために一直線に考えたときに、ストレス（邪魔）となりうる要素は最小限にするべきです。もしそれがどうしても必要だったとしても、いちいちテキストで伝えるのではなく、イメージやアニメーションなどできるだけストレスを感じない方法で伝えることを考えるのが良いでしょう。

まとめ

今回はマイクロインタラクション ―UI/UXデザインの神が宿る細部の内容とそこから自分が感じたことをざっくりとまとめましたが、ここに書いたこと以上に、本書ではデザイン的な示唆が多数紹介されています。漠然としたUXデザイン手法に振り回されて、肝心なプロダクトにはどう落とし込んだらいいのか分からないといった悩みを持つデザイナーにとっては、非常に考えをまとめて整理しやすい内容なのではないでしょうか。

本書の最後では、マイクロインタラクションをどのように実践したら良いのかが、例を踏まえて解説されています。また、それをどのようにテストしたら良いのか？という部分についても解説されているので、もし既存のプロダクトのマイクロインタラクションを改善したいとかんがえる場合はそこから初めてみるのも良いかもしれません。
（6.5.2 サエないマイクロインタラクションを改善する方法　ではQ&Aベースに自身のプロダクトを振り返られるようなリストも用意されています）

一つのマイクロインタラクションを考えぬく（またはそのプロセスを学ぶ）ことによって、マクロな視点でもデザインされたプロダクトを生み出せるのではないでしょうか。

マイクロインタラクション ―UI/UXデザインの神が宿る細部

※表紙の写真は chris4403さんのエントリー を参考に適当に選んでみました