UIデザインに関するサイコゥ!サイコゥ!サイコゥ!なアイデア
はじめに
サイコゥ!サイコゥ!サイコゥ!とは：
キングオブコント2021で優勝した空気階段 水川かたまりのギャグです。
最高な時に使うと良さそうです。
サムネのイラストはデビルキック伯爵です。
この記事について
エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendarの15日目の記事です。
Webエンジニアやってる私が、UIデザイン面白いなと思うきっかけになった本や、私をサイコゥ!サイコゥ!サイコゥ!にさせたUIに関するアイデアなどを書きたいと思います。
※勝手な独自の解釈などが存分に含まれてる可能性があります
1. 道具の透明性
最初は、「融けるデザイン」で紹介されていた道具の透明性についてです。
道具の透明性とは、道具を使って何かしらの行為を行う際、道具に向ける意識をどれだけ少ない状態にするかということだと解釈しています。
人は道具を使わない場合、自分の身体が行為を行うためのインターフェースになってきます。
このとき、身体は思い通りに動かせるため身体に意識を向けることが少なく、行為対象のモノに意識を集中することができます。
しかし、人間の身体でできることの範囲は限られてくるので、より高度な行為を行う場合は道具が必要になってきます。
道具を使うと、できることの範囲が広がるわけですが、その分道具に対しての意識というのも発生してきます。
身体だけの場合は行為対象のみにだけ気を向ければよかったですが、道具を使うことで、道具に対しても意識を向けなければいけなくなるのです。
道具に対して意識を配る割合が多いとき、その行為を難しく感じるでしょう。
逆に、道具に対して気を配る割合が少ないと、その自分の身体で行為している時と同様に、容易に感じると思います。
この、道具に対しての意識がなくなるということが、道具が透明であるということなのだと思います。
道具に対して意識が必要ないという状態は、身体で行為を行うときの状態と近い状態なので、透明な道具というのは、人間の身体の一部となり人間の可能な行為を拡張する、という風に捉えることができるのかもしれません。
そうするとUIデザインとは、いかに道具を透明にして、道具を身体の一部にすることが出来るかという作業なのかもしれません。
そう考えると、UIデザインってサイコゥ!サイコゥ!サイコゥ!ですね。
※初めて使う道具がいきなり透明であることは少なそうです。今ではキーボードはほぼ身体の一部になってますが、最初はタイピングに苦労することがほとんどだと思います。なので、いかに道具の学習を容易にして、透明に近づけることが出来るかというところが大事なのかもしれません。
2. アフォーダンス
次は、「誰のためのデザイン?」で紹介されているアフォーダンスについてです。
このアフォーダンスの理解と説明は難しいと思っているのですが、現時点でのわたしの解釈は、モノと人との関係性から立ちあがってくる行為の可能性のことだと思っています。
道路沿いなどに設置されている柵に腰掛ける人をたくさん見かけます。これは腰掛けるのにちょうど良い高さというモノの状態と、ずっと立っていて疲れたなどの人の状態から、座るという行為が促されているのだと思います。
しかし、幼児などにとっては柵は高すぎるため、幼児に対して座るという行為は促していません。
また、綱渡り大好き大得意な人にとっては、柵の上を歩くという行為を促しているもしれません。
他にも、テーブルのような平らで安定した場所は、何かものを置くという行為をアフォードしています。また、テーブルの本来の用途ではない座るや立つという行為も、人の身体的な状態によってはアフォードすることも多いかと思います。
このように、人の身体的な状態によって変わってくることはありますが、そのモノのインターフェースによって、特定の行為を無意識に促すことが出来るようです。
人が道具を使って意図的に行為を行うというよりも、道具のインターフェースから無意識に行為をさせるといったことが出来ると、サイコゥ!サイコゥ!サイコゥ!ですね。
そういった例として、深澤直人さんの傘立ての話や、壁掛けCDプレイヤーはとても面白いです。
ちなみに、モバイルアプリ・Webアプリなどのユーザーインターフェースに関しては、タッチ、フリック、クリック、ドラッグといった行為をどこで可能かを指し示すためのシグニファイアという考え方が重要になってくるみたいです。
3. Fluid Interfaces
次は、WWDC18で発表があったDesigning Fluid Interfacesについてです。
この動画では、iPhoneXのFluid Interfaceについての説明や実現方法などについて学ぶことができます。
この動画の冒頭部分に出てくる、「滑らかな操作性を達成するためには、道具を人の心の延長のように感じることが出来るか」という話が面白かったので、そこについて少し書きたいと思います。
コンピュータは当初、動かすために専門知識が必要だったり、手順が多かったりと、対象に対しての間接的な操作が多く扱いが難しかったらしいです。
しかし、段々と間接的な操作が省かれていき、現代のiPhoneなどでは目的に対して直接はたらきかけるようになっているようです。
これは自然界のモノにはたらきかける行為と近しい行為になっているため、自然界の法則にそぐわない動きをすると違和感を感じたり、使いづらく感じてしまうことがあります。
そういった道具のインターフェースを、より人間が正しく感じられるものにすることで、まるで道具が自分の肉体の延長線上にあるように感じることができると語られています。
じゃあどのように設計すると人が正しい動きだと感じることが出来るのかというのを、反応や方向転換、中断、空間的一貫性を保った配置といったキーワードをもとに、動画内で紹介されています。
サイコゥ!サイコゥ!サイコゥ!ポイント:「まるで道具が自分の肉体の延長線上にあるように感じられる」というのは、融けるデザインの道具の透明性に通ずる話だと思うので、この動画には道具を透明にするための方法がたくさん詰まっているのではないでしょうか。
4. モードレスとモーダル
次は、Modeless and Modalという本で紹介されていた、モードレスとモーダルについてです。
この本では、著者の方がモードレスとモーダルについて日々考えていることをいろいろな切り口で述べられています。
その中でモードレスとモーダルを自動車と電車に例えた話が面白かったので、ここではその話を書きたいと思います。
ある目的地に行くという行為を自動車で行う場合、自由度はかなり高くなるため、向かいながら途中でルートを変えたり、コンビニに寄ったり、はたまた引き返したりすることができます。このように、その人の気分や状態に応じて動的に行為の変更が可能になります。
これが電車の場合は、次の駅に着くまでは何も変更することができません。途中でルートを変えたり、途中で降りたり、途中で引き返すなんてことはできず、目的に向かって決められたルートをただ走るだけです。
モードレスなUIでは自動車と同じように、目的に対しての操作順番や何をするかというのは操作者が自由に決めることができるため、途中でやることを変えたり、自分のやりやすい方法での操作を行うことができます。
一方、モーダルなUIでは電車と同じように、目的に向かって決めれらた順番や操作を行う必要があるため、途中でやることを変えたくても変更ができません。モードを抜けて初めからやり直すか、一旦行為を完了させるしかありません。
電車のように、決められた方法で目的を達成できた方が楽だという状況もあるかと思いますが、複雑になってくるモバイルアプリケーションのUIなどは、動的にやりたいこともどんどん変わってくるため、自動車のような柔軟性が必要とされそうです。
もし電子書籍アプリが電車方式のように途中で行為を変更できない作りになっていると、まず探す・購入する・読むという目的ごとに入口が設けられており、探す入口から入っていろいろ本を漁ったのちに、買いたい本が見つかった場合は一度ふりだしに戻って違う入口から入り直す必要があるかもしれません。
アプリを使っていて、行いたい行為というのは動的に変わってくることが多いと思うので、モーダルな電車式ではなく、モードレスな自動車式のUIを設計することが必要とされそうです。
5. オブジェクト指向UI
最後に、オブジェクト指向UIについてです。
オブジェクト指向UIとは、オブジェクトを起点として設計されたUIのことだと思っていますが、このオブジェクトを起点として設計するというのがとても有益であり、サイコゥ!サイコゥ!サイコゥ!だと思うわけです。
特にサイコゥ!サイコゥ!サイコゥ!だと思うのは、「オブジェクトを起点に考えることで、より現実世界と同じ法則でインターフェースを提供できる」というところがあると個人的に思っています。
普段ヒトが生活している現実世界の法則と同じようにUIを構成することで、慣れ親しんだ感覚でUIを操作できるようになり、より直感的な操作が行えるでのはないかと思うわけです。
私たちは現実世界で何か行為を行おうとした場合、まずモノに対して意識が向くと思います。例えば本を買いたいという場合は、本というモノを手に取って購入という行為を行います。また、何かを書き残したいという場合は、ペンというモノを手に取って、紙に対して書き残すという行為を行います。
この時、もし途中で行為を変えたい場合は自由に変えることができるので、本を手に取った後にまず立ち読みしてみるとか、やっぱり買うのをやめるとか、他の本を探す、といったことを流動的に切り替えていけるわけです。
このように、まずモノに対して意識が向き、行為を流動的に切り替えられる、というのが普段の生活の中で起きていることだと思うので、この法則をスマートフォンやPCの中の世界で再現すれば良いと思っています。
オブジェクト指向UIでは、まずアプリケーションに登場するオブジェクトを洗い出し、オブジェクト同士の関係性、そのオブジェクトの性質や操作というのを明確にするということを行います。そして、その関係性や性質、操作をUI上に落とし込んでいきます。
このオブジェクトを起点に考えるということが、普段のヒトのモノの捉え方にそった形になっているので、結果として現実世界と同じ法則でインターフェースを提供できるというところに繋がってくるのではないかなと思っています。
また、オブジェクト思考UIはUIの設計プロセスを明確にするという点でも有益なのではないかなと思います。
これまでなんとなくワイヤーフレーム書いてスタイリングしていたのが(わたし)、オブジェクト指向UIデザインのような設計方法があることで、明確に設計プロセスを定義して、いろんな人を巻き込みながら進めることができる気がします。
番外編: 越境するデザイン
番外編として、Designship2018の越境するデザインというセッションについてです。
このセッションを聞いていた当時は、仕事で全く使わないのにUIデザインを勉強していたので、果たしてこういうことをやって何になるんだ、結局自分が作りたいもの作るという目的だけで終わってしまうのではないかと不安になることが多かったのですが、このセッションを見てだいぶ勇気づけられました。
デザインとエンジニアリング両方やっていきたいけどなんとなく不安みたいな方は、動画を視聴するとサイコゥ!サイコゥ!サイコゥ!になれるかもしれません。
さいごに
UIデザインってサイコゥ!サイコゥ!サイコゥ!ですね。
この記事を書きながら、最近UIデザイン全然やってないなと悲しくなってきたので、2022年はちゃんとやっていこうと思いました。