融けるデザイン、Amazonで品薄状態
どうやら融けるデザインがAmazonで品薄状態の様子。新しい学期に入って教科書としての需要が高まったのだろうか。融けるデザインはインターフェースの本質を詳しく解説した本。なぜ「融ける」という言葉が使われているのか。それは自分の体に融けこむようなデザイン、インターフェースを解説しているからだ。
自分の体の延長のように扱えるデバイスとは。それはどのようにして設計されるのか、心地いいデザインと感じるのはどんなときか。こういったことを丁寧に解説してくれる本は他にない。だからこそ品薄になるのもわかる。この本は素晴らしい比類なき教科書だろう。
VisualHapticsから体験できる、未知の”感覚”
VisualHapticsはマウスを使って疑似的な○○感を味わえるという不思議なデモだ。PC版はコチラから体験できる。スマートフォンでは体験できないのが少し残念。一応動画で見れるのだが、デモの肝は実際に体験しないとわからない。
まず”ざらざら感”を味わうデモでは、マウスカーソルが自分の動かした通りには動かない。でこぼこ面の範囲に入ると上下左右にランダムにマウスが動く。粗さが大きくなるとそれだけランダム量も増える。
ただ、操作している自分から見ると本当に”でこぼこ”しているように感じる。そう、”感じる”のだ。これはフィードバックがあるからだ。”自分の腕を動かした”という入力に対して”カーソルが動く”という結果が得られるが、その結果にある種のランダム性や視覚的な変化量を加えることで人間に対して”感触、感覚”というフィードバックが与えられる、という実験なのだ。
本当はざらざらなんかしていない、ただマウスをマウスパッドの上において摩擦なく一直線に動かしても、画面のフィードバックではざらざらとランダムに動いた結果が返ってくる。そうすると、本当にまるで”ざらざらした面で動かした”かのように錯覚してしまうのだ。これは体験してみるとぶっちゃけ気色悪くて、それでいて面白くって笑ってしまう。
面白いのはゲームでの感触に非常によく似ている、というかゲームではこうやってプレーヤに対して感触というのを与えているんだなとわかることだ。本当はただの画面上に描かれた二次元的な点の集合のはずなのに、水中にいるときはボタンを押してから遅延を仕込むことで思い通りに動けない鈍さ、水というものの抵抗を”体験”させることができる。これがUser Experience(ユーザの味わう体験) ＝ UXなんだろう。
どうしてコンピュータ用語が擬人化されるのか？
上記記事が話題になったが、本書の中でもいくつか挙げられている。普段何気なく使うのは”重い”だろう。ページが読み込めなくて”重い”。そこには質量なんてないはずなのに、”軽い”、”重い”と比較するのは何故なのか。
本書の2章の最初のほうで説明している文章を引用してみる。
たとえば「iPhoneは非常に滑らかにサクサク動くが、なぜあそこまでやる必要があるのか？その意味は何か？」という疑問に対して、「指とグラフィックとの高い動きの連動性が道具的存在となり、自己帰属感をもたらす。そしてその結果、道具としての透明性を得るためだ」という説明ができるようになる。
融けるデザイン 第二章 インターフェースとは何か P45
冒頭の”滑らか”、”サクサク”という曖昧な言葉、感覚に対して本書を読むことでその意味を説明できる。まず道具的存在とは何か？道具としての透明性とは何か？
本書の中で説明されている例ではパソコンで文字を入力している時に、ふとキーボードの入力が遅延してくると「奇妙なひっかかり」という感覚をユーザは味わうようになる。この時人間は余計なこと、邪魔なこと、あるいは意識的にキーボードという存在に注意を払わなければならなくなる。この時、キーボードとの一体感のような感覚が失われる。
反対にキーボードの操作に習熟していて特に遅延などがなければ、集中して文章を打っている時”キーボードを叩いている”ということを意識しなくなる。スマートフォンでいうならば、”今この文章を読んでいる”ということに集中していて、”ブラウザの画面をタッチしてスクロールする”という動作をことさら意識していない。この時”道具が透明である”、”道具的存在”のように扱われる。人間の意識や体に”道具が透明になって”融けこんでいるというわけだ。
だから自然と人間的な感覚に寄り添った言葉が選ばれる。
自己帰属感という素晴らしく面白い観点
人間が道具を操作しているという意識を持たずに、その道具を用いて何か目的を達成できるとき、道具が自分の延長のように感じられる。まるで自分の手足のように扱う、という慣用句のように。例えばプロ野球選手はバットのコントロールを自分の腕の延長のように操れるかもしれない。トラックの運転手は自分のトラックの幅や通る軌跡を正確に感覚として予測できるかもしれない。
自分が扱っている道具が完全に自分の支配下にあり、なおかつ意識されない状態の時人々は自己帰属感を持っているとされる。これはまた、道具が人間に対して返してくる反応を正確に感じ取れることも含まれる。
例えばキーボードを使っている時きちんと売った内容が表示され、音がかちゃかちゃと鳴って、キーが押し込まれた感触があるから帰属感がある。逆に音もなく、物理的なキーもない入力だと画面がない限り、きちんと入力できたかはわからない。道具は人に対してきちんと反応を返すことも透明性、自己帰属感に重要だ。
本書の中で一番面白かった例えがピンポン玉の話だ。壁にボタンがあって、ピンポン玉を当てて操作しなければならないとする。この場合、1cm~5cmくらいならば楽々コントロールできるだろう。なぜなら予測可能だし、キャッチすることも容易だ。ちょっとトラブルが起きても修正できる。この時ピンポン玉は自分に帰属していると言える。
ところが10cm,20cmと離れるにつれコントロールを失っていく。こうなればボタンに当てるのはもはや容易ではなく、自分にとってピンポン玉は扱えないものなので、結果が予測できないものになる。こうなればピンポン玉は自分の支配下にないため、自己帰属感のない状態だと言えるだろう。自分の思い描く理想状態と結果、帰ってくるフィードバックがぐちゃぐちゃだからだ。
これを現代のWebサイトのデザインにも適用できるというわけだ。リンクやボタンをクリックしたにもかかわらず、ページが読み込まれない時は自己帰属感がない。ユーザの予測通りに動くこと、操作するときに十分に支配的に扱えること。「ひっかかり」などでユーザの注意がそれてしまって帰属感を損なわないようにすることなど、自己帰属感という視点から眺めるだけで様々なアイディアが浮かんでくる。
おわりに
この記事では融けるデザインのほんのごく一部の紹介にとどまっている。237ページあるのだけれど、その内容はかなり広範囲にわたる。
Keita Watanabe | Interaction and Application Design Research
上記リンクのProjectで様々なユーザの体験に対する研究をされている。
例えばカーソルカモフラージュという研究では、大量のダミーカーソルを画面に表示することで傍目から見ると本物がどれかわからないが、本人だけが自己帰属感を持っているので正確に入力できるという。自己帰属感の研究から発想した非常に面白い技術だ。
またスマートフォンでは傾きセンサを利用してよりリアルなテクスチャの表現を探っていて面白い。どういう技術なのかわからないけど、きちんとブラウザから加速度を読みだせてるらしい。きっちりと角度によって色がくるくる変わっている。
http://fms-cat.github.io/LiveTexture/
確かに日常生活では角度によって物の質感などは変わるのを目にするが、スマートフォンという画面をわざわざ傾けて変化をチェックするということはない。この可能性に着目してデモとして実証していることがスゴイ。こういった表現があると探偵もののゲームなどで壁の一部の反射が不自然だからあそこが隠し部屋だーとかわかるのかもしれない。面白い可能性がある。
本書の帯にも書かれているように”最重要キーワード「自己帰属感」”について学べることは本当に価値がある。世の中のインターフェースに対して新しい視点を獲得できる。読んで絶対に損はないだろう。
