フロントエンドエンジニアが『融けるデザイン』を読み UI について考える

フロントエンドエンジニアの茶木です。

Gaji-Laboは、UIデザインとフロントエンド開発を通じて「手触りのいい UI 」を提供していく会社です。先日もデザイナーとエンジニアが集まり、UI をテーマとした勉強会を開催しました。
普段のWebデザインの視点から一歩離れ、JIS や ISO のドキュメントに基づいて UI の定義や概念を見直し、より広い文脈から理解を深める勉強会となったのですが、その中で『融けるデザイン』という書籍が話題に上がりました。今回は書籍の中に出てくる “道具の透明性” について、自分なりの考えをブログにまとめてみます。

書籍の内容

冒頭部を引用します。

本書がテーマにするのは、インターフェイスデザインである。インターフェイスデザインは、画面内の設計、あるいはその使いやすさと思われているが節があるが、それはインターフェイスデザインのごく一部のテーマにすぎない。本書が扱うのは、コンピュータというメタメディアの性質をどのように人々の身体や活動に結びつけるかという点での「インターフェイスデザイン」だ。したがって、人間の知覚や行為、身体性がテーマの中心となる。

p9, p10

画面内のボタンの挙動や配置だけではなく、それを取り巻く環境についても触れ、人々がどのように、知覚しそれを活用しているのかといった内容です。

道具の透明性とはなにか

ものづくりにおいて、インターフェイスとは、モノと人との境界面のことを指す。設計の対象としてインターフェイスが意識されたのは、かなり最近のことだ。＜中略＞そうしてヒューマンインターフェイスの研究では、石器時代のような道具のあり方、すなわち原因と結果が直接的な関係になることをひとつの目標とするようになった。たとえばハンマーのように、手に持つとそれ自体を意識せずに、釘を打つこと（対象）に集中できるようなあり方を理想であると考えるようになった。これを「道具の透明性」という。透明というのは比喩であり、道具を利用している最中にそれ自体を意識しないで済む状態、あるいは意識しなくなる現象のことを指している。

p42, p44

ハンマーを使っている間は、ハンマー自体のことは意識せずに釘を打つことに集中できます。この道具自体を意識しないで済む状態や意識しなくなる現象が透明性で、これを理想としたということです。

道具の透明性をスクリーン上の UI にもたせるには

当記事の主題はこれです。
ハンマーはシンプルな道具です。使い道とコツはすぐにつかめば透明になる感覚は理解できます。しかし、スクリーン上の UI の操作において、同じように透明性をもたせる設計ができるのか？という疑問が残ります。

たとえば、スクリーン上の購入ボタンを押すケースを考えたとき、これはマウス操作やタップであるわけだし、商品自体も自動販売機のように手元にすぐ届くわけではなく、原因と結果が、非常に遠いものです。

考察1: 阻害しない、集中できる・没頭できること

一度スクリーン上の UI から離れて、キーボードを例に考えます。

＜前略＞つまり、道具になにか問題が発生すると、その道具が意識に上り、それ自体を対象として扱う（事物的存在になる）。しかし、道具に問題が起きなければ、それ自体は透明性があり、例えばキーボードでは文章を書くということに集中できる（道具的存在になる）。

p45

問題なく入力できている間は、キーボードについて意識しないでいられるが、入力がうまくいかないときこそキーボードが強く意識されてしまいます。

ユーザーは入力時に出力を想定しており、ユーザーが問題と感じることは、単なる不具合だけでなく、この入力操作と出力が想定するものと違うことです。

これはキーボード以外の UI についても一般的に言えそうで、入力と出力の間に問題があれば、透明性が生まれないということです。

考察2: もっと先の目的にアプローチできること

インターフェイスは人とモノ／技術の接点であり、利用者にとってはインターフェイスだけが知覚され、行為はそこで起きる。技術によって人が拡張されたとしても、拡張されたうえで新しいインターフェイスが現れ、そこでまた近く行為が生まれる。インターフェイスがなくなることはない。境界の場所が変わるだけである。モノや道具の使用は自己帰属化をもたらし、インターフェイスの場所が変わる。ペンを持てば、ペン先までが身体になり、ペン先と紙で知覚行為＝インタラクションが発生する。車を運転すれば、車全体が身体となり、車と外界で知覚行為が発生する。

p69

ペンを持てば、書く能力が身体に加えられ、キーボードをまた例に挙げると、手書きより速く書け、修正も可能になる能力が身体に加えられます。

キーボードは文字入力のためのインターフェイスですが、ユーザーが行いたいのは、画面上に文字を並べることではなく文章作成です。増幅された能力で文章作成を行えば、もっと先の目的にアプローチできます。もっと先の目的とは、請求書や詩の作成やプログラミングなど、文字を羅列すること以上の意味を持ったことです。

道具の透明性をスクリーン上の UI にもたせるには

ここから、スクリーン上の UI の扱いを考えます。

集中できる UI であること

スクリーン上のボタンやインプットフォームは、それ自体を意識させないように自然であることが重要です。ひとつは、入力と想定する出力に差異がない自然なフィードバックであること。もうひとつは、次項に繋がりますが、入力したときの出力が想定できることです。

実現したいことにつながる UI であること

考察2でも書いた通り、ほしい結果がストレスなく得られることも、道具の透明性の重要な要素だと思います。これは UI以外のプロダクト全体やユーザーを取り巻く環境も含めて実現することでもあります。

UI に着目するとユーザーが入力操作から出力状態を想像できる必要があるといえます。さらに、複数のステップを踏む UI操作であれば、途中経過を想像するのは難しくなるため、想像しやすい一貫性のある UI設計や、ステップ数を減らす工夫によって、ステップがどこにつながっているのか全容を掴みやすくなります。

具体的にフロントエンドエンジニアにできることは

遅延のないフィードバック

自然に操作できることは大事です。ユーザーが入力操作と出力の間に感じる違和感のひとつは、”遅延” です。キーボードからの入力がもっさりしていたり、ボタンを押して画面がすぐに切り替わらなかったりすることです。これらはフロントエンドエンジニアの守備範囲と考えます。スクリーンへのフィードバックを意識することが大切です。

新しいデバイスや技術を知る

デバイスや使用技術などのプロダクトを取り巻く環境は絶えず変わっていきます。

デバイスの変化の例としては、デスクトップからモバイルへの変化が挙げられます。ユーザーは場所にしばられなくなったことや、入力方法もタッチデバイスに合わせて変化しました。使用技術を例に挙げると、Webプッシュ通知の利用も一般的になってきました。Webプッシュ通知は、メールアドレスや電話番号も必要なく、ブラウザを開いていなくともユーザーに通知を送れます。

環境が変われば UI設計のアプローチも変化します。デバイスや新技術に対してアンテナを立てておくことも大切です。

なぜ、本書を通してインターフェイスについて考えることにしたのか

フロントエンドエンジニアが実装するとき、UI はボタンや入力フォームといった ”部品” を想像しがちだと思います。実装時にマージンや文字サイズやコントラストがユーザー入力を阻害しないか？といった視点で見ることはあるにしても、あくまでそれらは「あたりまえ品質」と呼ばれるものかもしれません。

一方「魅力的品質」と呼ばれるものや、 Gaji-Labo の掲げる「手触りのいい UI 」といったものは、ユーザーの入力作業そのものではなく、プロダクトとそれを取り巻く環境を通してユーザーがなにを達成するのか、ユーザーとシステムの良い関係性の設計から生まれると考えます。

最後に、デザイナーだけではなく、プロダクトチームで市場やユーザーの理解を深め、どうしたら我々のプロダクトは、道具の透明性があると言えるくらいの体験を提供できるか、を考えて取り組んでいきたいと思いました。