今回は「融けるデザイン」という本を読了したので、その所感を書いていこうと思います。
はじめに
とあるサイトで、「web業界なら読んでおくべき本」として紹介されていたので読んでみました。これまでの書籍と違い技術書ではなく、「これからの世界でアプリケーションをより使いやすくするには何を考えないといけないか」ということを教えてくれました。
本書ではインターネットはもはやブラウザ上だけではなく、あらゆるモノと紐づいているため、物理的にインタラクティブとなれるようなデザインが必要だと述べられていましたが、僕はwebアプリケーションの開発者なので、ここではブラウザ上でも応用が効きそうな点のみ焦点を絞って記載していきます。
学べたこと
Apple製品が優れているのはアニメーションがカッコいいからではない
終始Apple製品がなぜ優れているのかを語っていましたが、その内容にハッとしました。
Apple製品のアニメーションはスタイリッシュで有名ですが、ただカッコいいわけではなく、心理学の要素を取り入れているんだそうです。どういうことかというと、たとえば - 格納ボタンを押したときに、ウィンドウがアイコンへ吸い寄せられるような動きをするのは、そこにウインドウが移動したということをユーザーに示しているから - iPhoneの使い勝手がすこぶる良いのは、マウスポインタと同じレベルで指と画面が連動して動き、体の一部のような体験を得られるから
といった具合に、「とにかく自己帰属させる」ということに重点を置いて設計されているんだそうです。
なんとなくそういうことなんだと分かっていましたが、言葉で表現されて改めて理解できました。
Apple 製品のアニメーションのかっこよさだけを真似た商品がなかなか売れ悩んでいるのは、その本質を理解せずに作ったからと書かれていて納得しました。
自己帰属感をユーザに与えよう
体験設計こそがデザイン(UI)を設計する上で重要で、自己帰属感をユーザに与えることが基本設計なんだそうです。道具を道具と思わせず、体の一部であるかのような体験をユーザに与えることができれば、これからもそのサービスを使い続けてもらえるでしょう。
ブラウザ上で自己帰属感を与える手段は主に「マウスポインタと要素とのインタラクティブ」、「要素と要素のインタラクティブ」の2つだと思います。 さきほどの Apple の例から学ぶに、例えば次のような動きが「自己帰属感」を与えることになるのでしょうか。
ボタンの上にホバーすると、少しだけボタンが凹む(物理ボタンの上に指を置いたような感じ)
フォームを入力して送信すると、(例えば)ページが紙飛行機のように折られてどこかへ飛んでいく
ユーザのしたい操作までの導線がしっかりしていて、ページ遷移したことがわかるアニメーションがある(要素の中に入っていくアニメーションとか)
読み込み速度を上げ、クリックと動作を限りなく連動させる
4番目はどんなサービスについてもユーザビリティ向上のため取り入れられていると思いますが、ほかのアイディアについて昨今のwebデザインでは帰属感を与えるのには限界がありそうです。少し前にwebデザインのトレンドとして"Neumorphism"が話題となりました。物理感がすごい見た目で注目を集めていたようですが、既存のweb画面の作りではなかなか扱いづらいのか、今のところ流行る兆しは見せていません。しかし、見た目が現実世界と近しいので、「自己帰属感」は出しやすいデザインなのかと考えます。これまでにないwebサービスで"Neumorphism"は威力を発揮するんじゃないかと密かに期待しています。
「新しいスキューモーフィズム」を謳う "Neumorphism" というデザインが最近一部で提唱されているようです。 Skeuomorph Mobile Banking by Alexander Plyuto この例のようにボタンやカードなどの要素が凹凸で表現されていて、明るい影(光)が落とされているのが特徴です。それによってボーダーや塗りを使わずに要素の形状を表します。 Neumorphism in user interfaces 単色の物体に凹凸が付けられているように見えるビジュアルは、ディーター・ラムスがBRAUNで手掛けたブロダクトや初期iPodの
https://note.com/hironobukimura/n/n0431c73714e8#UmsOc
よく人間の心理を理解したサービスは全てがうまくいく
人の認知や心理をよく理解し、自己帰属感の高い設計をしないと、「次から使わない」と辞める原因となってしまうそうです。しかし昨今の設計のほとんどは「社会的価値を作るため」の設計を重要視し、「人の認知や心理」は(お金にならないので)後回しにされがちと言います。
しかし、「人の認知や心理」をよく理解して設計された製品は、その環境を利用する開発者たちも、それを理解しさらに拡張しようとします。その結果、サードパーティのアプリの質も上がり、サービス全体の質もどんどん高まっていきます。良い例としてOculusやiPhoneが挙げられていました。
Oculusは VR デバイスなのでそもそも自己帰属感が高い製品ですし、開発者の意欲もすごいんだと思います。iPhoneは先ほどから例として挙げていますが、拡張された体のような感覚を味わえる操作感を実現したからこそ、開発者としても開発しやすくより質の良いアプリが生まれてくるんだと思います。
僕が勤めている会社でも、現在サードパーティを集めるべく API の開発に勤しんでいます。 API の質が、アプリ含め、その製品全体の質を決めるといっても過言ではないのでしょう、(ジャンルが違うので自己帰属感が必要かはわかりませんが)より「エンドユーザが自然に扱えるような設計」を心がけようと思います。
まとめ
本書で実例があがっているほとんどが現実世界とのインタラクティブデバイスでした。僕は現在webアプリケーションの開発者として働いているので、どうしてもブラウザ上で作れるアプリはどんなのかと考えてしまいがちですが、
人の行為、行動、ライフスタイルが設計の軸であって、メディア形式の発想はほとんどない。 と筆者が述べているように、ブラウザに拘らず、作りたいサービスを実現できる最適なデバイスで実装するべきなんだと再確認できました。
しかし…自作商品を作って配布することができれば良いんですが、webアプリケーションを作るのとハードルが違いすぎるので、現実世界とのインタラクティブなデザインは個人的な趣味で留めておこうと思います。
業務でもし提案できることがあれば。