KDE BLOG

バイブス

「マイクロインタラクション UI/UXデザインの神が宿る細部」を読んだ

こちらの書籍を読みました。

www.oreilly.co.jp

UIデザイナーである自分にとって明日から使えるTipsがたくさん詰まっておりとても読み応えのある良い本でした。
まだ全てを理解できていませんが、現時点の読んだ感想などを書き残したいと思います。

理解できて良かったこと

マイクロインタラクション = 小さなアニメーションではない

自分がこの書籍を読んで理解できた中で一番良かったことは、マイクロインタラクション = 小さなアニメーションではないということです。

Web上の技術系の記事などを見ると、マイクロインタラクションについて、アニメーションのことばかり説明しているものが多いように感じます。
実際、自分自身も、マイクロインタラクション = 小さなアニメーションという認識を持っていました。

しかし実際はそうではないと言い切れます。
アニメーションは、マイクロインタラクションにおけるフィードバックの一つ、つまりあくまでマイクロインタラクションの一部です。
(これまで自分が認識していたものはマイクロインタラクションというよりもマイクロアニメーションと呼んだ方がいいように感じています)

この書籍ではマイクロインタラクションの定義は「ひとつの作業だけをこなす最小単位のインタラクション(製品とユーザーのやりとり)」としています。

マイクロインタラクションこそがプロダクトの質を左右する

書籍内では至るところに分かりやすい実例や、著名なデザイナーや学者の名言が引用されています。

冒頭のでは以下の、チャールズ・イームズ氏の言葉が引用されています。

「細部は単なる細部にとどまりません。細部こそが製品を作り上げるのです」

例えばECサイトでは、主たる目的は「商品を買う」になると思いますが、その中でも様々なマイクロインタラクションがあります。

例えば

  • ログインする
  • 商品を検索する
    • カラーで絞り込む
    • JANコードで検索する etc
  • 商品を買い物かごに入れる
  • 配送先を入力する
  • 決済方法を選ぶ
  • メルマガ登録する

などです。 これら一つ一つの使い勝手が悪かったら(例えば、ログインしているのに配送先を毎回ゼロから手入力しなくてはならない等)、たとえ見栄えのデザインが良くても、ユーザーは不満を持つでしょう。

「こよなく愛する製品」と「許容範囲の製品」の違いを生んでいる要素がマイクロインタラクションであるケースは多いのです。

この 両者の違いを意識して見る と今まで気づかなかったことが見えてきそうです。

マイクロインタラクションは思っているよりも考えるべきことが多い

書籍では、マイクロインタラクションをデザインしたり分析する上で4つのパートを紹介しています。

  1. マイクロインタラクションを開始させるトリガー
  2. マイクロインタラクションの動作を定義するルール
  3. ルールをユーザーに明示するフィードバック
  4. マイクロインタラクションのメタルール(ルールを制御するルール)であるループとモード

各パートごとの原則などが分かりやすく書かれているのですが、自分がこれまでデザインしたUIがこのような原則に沿ってデザインできていたかというと自信を持ってYesとは言えません。特に 2.のルールに関してそう感じました。

機能要件として指示があった場合、その要求を満たすことに囚われて広い視野で様々なケースを想定したルールを考えられていなかったように思います。
画面デザインはするものの、この場合はどうするかなどのルールは実装者の段階で判明するということがありました。

ルールを決めるのは通常はデザイナーの仕事なのです。

と著者は書いています。
マイクロインタラクションの機能を誰が見ても分かるようにモデルを作る、複雑さを取り除く、プラットフォームやユーザーの属性を用いてゼロから始めない、など、このルールを決める上での多数のヒントが書かれているので、これらのヒントを生かして最適なルールを決められるようにしていきたいです。

技術発展の歴史はマイクロインタラクションの歴史でもある

歴史を見ると、コピペの発明や、スクロールの進化など、人間とコンピューターのよりよいインタラクションを追求したインタラクションデザイナーの苦闘があったそうです。
ボタンやスイッチ、キーボードやマウスなどのコントロールだけではなく、音声や身振り手振りといった「入力」の方法が変わるごとに、マイクロインタラクションも変化してきています。

今ではスマホでは当たり前となった、Twitterなどで「画面を下にスワイプすると最新情報を読み込む」マイクロインタラクションもかつては画期的でユニークなものだったはずです。

今はPCやスマホのウェブアプリのUIをデザインしていますが、新しいマイクロインタラクションに出会うことが楽しみになりました。

UI Details JP を作った

最後に、この書籍で頻繁に登場する little big details という細部のUIを多数紹介している Webサイトに感銘を受けて、自分も UI Details JP というサイトを立ち上げました。

https://ui-details-jp.tumblr.com/post/629253519508127744/google-search-covid-19
ui-details-jp.tumblr.com

人のためにというよりかは、自分の勉強のために作ったサイトなので、書いている文章に一貫性がなかったり、コレクションしているUIの粒度もバラバラですので見づらいかもしれませんが、暇な時によかったら覗いてみてください。

もし、こんな面白いマイクロインタラクションがあったよ!などがあればぜひ教えていただけると幸いです。