yuheijotaki.com

【読書メモ】マイクロインタラクション: UI/UXデザインの神が宿る細部

UI/UX 関係の本を読みたいと思って「マイクロインタラクション: UI/UXデザインの神が宿る細部」を読みました。

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

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

 

概要

マイクロインタラクション という言葉の定義について。自分はWebサイトやサービス、アプリ上のとにかく細かい機能や動きのことをマイクロインタラクションと考えていましたが、本の中ではそういった外見上のことではなく、

単一のシナリオに基づいて一つの作業だけをこなす最小単位のインタラクション

として扱っています。 そして、その範囲においては、

ひとつのアプリや製品を構成しているケースもあれば、（こちらのほうが多いのですが）大規模な製品の一部分である場合や大規模な製品と並立している場合もあります。

とのことで、一般で用いられるマイクロインタラクションと自分が考えていたものに大きな違いがあることに最初に気付かされました。

マイクロインタラクションの具体例として、本中には多くの例が上げられていますが、Little Big Details に掲載されている例も多かったです。このサイトを以前はフォローしていて、Facebookの地球儀アイコンがユーザーの住んでいる地域によって異なる などもこのサイトで知りました。
ただこのサイトで取り扱っている内容はシナリオ的な話は少ない印象で、ひとつのインタラクションにのみ焦点が当たりがちなので、これを見ていればマイクロインタラクションが分かるというのはまた別な話なのかと思いました。

この本では、マイクロインタラクションの構造（フロー）としてある

  1. トリガー（マイクロインタラクション起動のためのスイッチ）
  2. ルール（トリガーが起動する条件と、マイクロインタラクションの動作の仕様）
  3. フィードバック（ルールが実践された際にユーザーに与えられるもの）
  4. ループとモード（ルールのルール、マイクロインタラクションが長期的にみてどう動くか）

を各章に分けて説明、最後に実践例が記されています。

ポイント

記憶しておいたほうが良さそうなポイントを主にまとめから引用します。

トリガー

  • トリガーとは、マイクロインタラクションを開始するものすべてを指す。
  • トリガーには手動トリガーとシステムトリガーがあり、前者はユーザーが起動し、後者はシステムが起動する。
  • コンテキスト（その場の状況）を考慮してユーザーがトリガーだと認識できるものをトリガーとする。（NYメトロ券売機の例）
  • データを前面に出すことを検討する。

  • 視覚的なシグニファイアを無視しない。（ボタンであればボタンらしく振る舞う）
    （シグニファイアとは、人間にとって知覚可能なデザイン上の手掛かり）

  • トリガーだけでは必要な情報をすべて伝達できない時はラベルを追加する。

ルール

  • ルールを使って、マイクロインタラクションの機能を専門家でなくとも分かるように説明するモデルを作る。ルールによってどのような順番で何ができて、何ができないかが決まる。
  • ルールには制約が反映されなければならない。ビジネス上の制約、コンテキストからくる制約、技術的な制約をうまく処理しなければならない。
  • ゼロから始めないこと。ユーザー、プラットフォーム、環境についてすでに知っていることを利用してマイクロインタラクションを改善する。
  • 複雑さを取り除くこと。ユーザーによる制御は最小限にする。
  • 選択肢を減らし賢いデフォルトを用意する。
  • ルールを利用してエラーを防止する。ヒューマンエラーが起こりえないようにする。
  • 言葉は簡潔に。ラベルで十分な場合は説明的な文章は使わない。

フィードバック

  • ユーザーが知る必要のある情報はなにか、それをいつ知る必要があるのかを理解する。フィードバックの良し悪しはこの理解にかかっている。
  • フィードバックはマイクロインタラクションを理解してもらうためのものである。フィードバックに値するルールはどれかを十分に検討する。
  • フィードバックで伝えたい内容を決めてから、それにふさわしい方法、手段を選ぶ。
  • 人間的なフィードバックにする。
  • できるだけ既存のUI要素を使ってフィードバックを伝える。
  • ランダムなフィードバックは避ける。
  • ユーザーによる動作に対してはできるかぎり視覚的フィードバックを出すようにする。

ループとモード

  • モードを設けるのは、実行頻度の低い操作があって、モードを使わなければマイクロインタラクションが煩雑になるような場合に限るべきである。
  • モードを設けなければならない場合は、できればそのモード専用の画面を用意する。
  • マイクロインタラクションの継続期間を延ばすにはループを使う。

サエないマイクロインタラクションを改善する方法

  • 「記憶に残る瞬間」にする必要があるか
  • ゼロから始めようとしているのか？
  • このマイクロインタラクションの中にあるデータでいちばん重要なものは何か、そしてそれは前面に出せるか？
  • カスタムコントロール（独自のUI）が適しているか？
  • ヒューマンエラーを予防できるか？
  • 見落とされ見落とされがちなものを活用しているか？
  • テキストやアイコンは自然か？
  • アニメーションを加えれば、もっと表情や動きが出せるだろうか？
  • 他に加えるべきフィードバックや手段はないか？
  • ユーザーがこのマイクロインタラクションに2回目に接したとき何が起こるか？100回目には？

良かった点

  • マイクロインタラクションというものがどういうものかが理解できたこと。
  • 今後Webサイトやアプリを使うなかで出くわすマイクロインタラクションに対して、本中で言われているパターン的なものに当てはめて考えることができ、今までより詳しく分析などができそうな気がすること。
  • これからマイクロインタラクションやUI関連に興味を持てそうという感触を得られたこと。

惜しかった点

  • マイクロインタラクションにこだわればこだわるほど、多くのトレードオフ（コードが多くなる/動作が重くなる/工数がかかる/運用コストがかかる）が発生しそうなものだが、そことどう折り合いをつけるのかみたいな話があまりない。
  • 資料（本中のキャプチャ）が若干古い。

どちらとも本の趣旨、数年前に出版されたものなのでしょうがないと思いますが。。

まとめ

自分は苦手なオライリーの本なので、若干くどい導入や細かい言い回しもあったのですが、1冊読み切れて良かったです。
手頃なサイズなので電車のなかでも読みやすかったです。

これをどう活かすか、的な部分でもう少し具体例が欲しいところですが、こういう分野にふたたび興味を持てたのでその点が一番良かったことかなと思っています。

そのほか読んだ記事など