読書記録：マイクロインタラクション: UI/UXデザインの神が宿る細部

最近読んでとてもよかった、マイクロインタラクションの感想をシェアさせてください！

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

本のサマリー

・マイクロインタラクションの概念を知る（なぜ大事にするのか）
・マイクロインタラクションの定義を学ぶ（どうやって細部を作り込むか）
・様々な実例からの気づきを得る（成功/失敗しているサービスから読み解く）

エッセンス

プロダクトやサービスのUIの「細部(マイクロ)における動作(インタラクション)」を磨き込むことで、全体的なユーザー体験の心地よさを作り上げられるという概念を学べる。使うユーザーの行動によって導き出されたマイクロインタラクションであるべき、という考え方を取り込むことができる。

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

マイクロインタラクションとは1つのシナリオに基づいて1つの作業だけをこなす最小単位のインタラクションのこと。何かの機械の設定を変えたり、データを同期したり、パスワードを入力したり、スイッチを押したり...日々の至るところに用意されている最小単位の動きのことを指します。普段は気にも留めない最小の動作が考え尽くすことで、サービスの質は上がるのだと著者は話しています。（確かに大事！でも当たり前すぎて普段は気づかないのですが...笑）

マイクロインタラクションの考えかた

1つのマイクロインタラクションは4つの要素から構成されています。

・動作のきっかけとなる「トリガー」
・インタラクションの動きを決める「ルール」
・ルールに基づいた結果をかえす「フィードバック」
・さらに細かいルールづけをする「ループとモード」

例えば、部屋のスイッチを入れる動きが「トリガー」だとすれば、それで灯りがつく条件づけが「ルール」です。どういった条件で灯りがつくのかを明確にしめすのがフィードバックで、さらにそのまま灯りを何秒間つけるのか？などを決めていくのが「ループとモード」とのこと。

詳細は本の中でわかりやすく紹介されているので割愛しますが、基本的には一方通行でトリガー→ルール→フィードバック→ループとモードでの考え方が良いようです。

ルールを作るときはフローチャートが便利

考え方として複雑になりがちなのが「ルール」の定義。条件分岐するのルールづけを行う場合はフローチャートで整理するのが便利なのだとか。全体の流れがわかりやすくなり、インララクションを考慮するタイミングやフィードバックが足りない箇所などに気づきやすくなりますね。

全体を通した感想

本の中でいくつか実例を紹介されていますが、特に興味深かったのが1990年代に刷新されたニューヨークのバスや地下鉄の運賃支払いを変更するときのプロジェクト。

1904年から使われてきた金属製の「トークン 代用貨幣(※1)」から、薄いプラスチック製の「メトロカード」に変更計画がありましたが、最大のミッションは「メトロカードの自動券売機を全域に設置する」というもの。当時からニューヨークは様々な言語・観光客なども来訪するため、見慣れない自動販売機に戸惑う人も多かったのだとか。（※トークンは駅窓口で購入する仕組み）

ここで活躍したのがアンテナデザイン社の2人のデザイナー。当時大変だったのは「タッチスクリーンを使ったことのある人がいる」という思い込みを捨てること。今では考えにくいですが、当時の人々の大半はタッチスクリーンのような自動券売機を使ったことがない状態だったそうです。そこから新しい機械に慣れてもらい、使えるようになるという難易度の高いデザインを行っていくという内容でした。

リサーチを繰り返していく中で、「ひとつの画面につき、ひとつの作業だけさせる」ことを優先するよりも「画面の数を少なくするよりも、すぐ理解できるように少しずつ情報を出す」ほうが、ユーザーのやりとりが早くなったという結果でした。

ここで最終的にデザインされた券売機の入り口画面がこちら。

引用元：https://www.oreilly.com/about/

右上の「Start」だけではなく、画面全体が押せるようになっています。「Start」はあくまで単なる目印で、ユーザーに「この画面が全体が押せる」ことを知らせる状態にさせるということ。このデザインは、10年以上使われたとのことです。

※1駅窓口でトークン(代用貨幣)を購入し自動改札機に投入するというシステムが1953年から用いられてきたが、メトロカードの普及にともない2003年をもってトークンの販売、使用ともに停止された。これらのトークンはニューヨーク交通博物館にて収蔵・展示されている。(Wikipediaより抜粋）

ユーザーの使うシーンや文脈を捉えたきっかけであるということを認識できる素敵な事例だなと思いました。

同時に「業界や製品的に一般的」と受け入れられているインタラクションが普及しているならば、それに則って作るのが一番いいのだろうなという所感も持ちました。

おそらくこの本で説いているマイクロインタラクションは、ユーザーにとって馴染みのない製品や新サービスであれば、使う人のリテラシーや、ユーザーテストを繰り返して、使いやすさを考える必要があるということでしょうか。今では当たり前のように使われている「コピーアンドペースト」もラリー・テスラーが発明していますが、当時は「ゼロから新しいインタラクションを編み出す」ことが当たり前だったのだな〜としみじみとしました。思い起こせば、普段の生活で行われている最小の単位（それ以外）においても、誰かが考えて提唱したものが浸透しているのですよね。前例がなく、馴染みのない動きをする場合の動作については「細部を考え抜く」必要があるだろうなと感じました。そのため、前例のないサービス、複雑な動きをするBtoB系のサービスや、使いにくいと言われている競合に立ち向かうために細部をこだわる際などにマイクロインタラクションは力を発揮してくれそうですね。

最後に

この本は、フロントエンドや開発者、UIデザイナーはもちろん、UXデザイナーや、PM、サービス責任者も一読するとマイクロインタラクションを磨き混むことの大切さを気づけると思います。基本に立ち返り、細部を大事にするという概念を学び取る際にオススメです。