UIを止めるな! 〜UIデザインのコンサルティングで話すこと〜

C6860c38adec703e995505b9afa12c83?s=47 yumemi
September 29, 2020

UIを止めるな! 〜UIデザインのコンサルティングで話すこと〜

『UI/UXデザイナーLT会』 https://rakus.connpass.com/event/187048/ で発表したスライドです。

デザイン作業をストップさせない、というようなことではなくて、どうやったら使いやすいデザインにできるのかとか、本当にそれでいいのかといった誰もが思うようなことです。

## 使いにくいシステムの生まれ
昔々、私たちは道具を使って狩りをしていました。行動の結果はそのまま現実に現れます。
これが19世紀頃、電気の登場により、「スイッチを押して隣の部屋の照明を点ける」というようなことができるようになりました。この頃から道具を使った行動と結果は直接結びつかなくなり、使いにくいシステムは生まれてきました。

いまではコンピュータで情報処理をして、より大きなものに働きかけられるようになりました。隣の部屋だけではなく「遠くにあるビルの1階の照明を点ける」ということもできます。
しかし、システムが使いにくかったりエラーが起きたりすると、システムは上手に処理できず、人間がシステムの道具になって働かなければなりません。
運用でカバーする、みたいなことです。

ではどうしたら使いやすくデザインできるのでしょうか。まずは操作と結果が直接結びつくようなUIを目指します。オブジェクト指向なユーザーインターフェイスです。

## 自販機の例
自動販売機を例にして見てみましょう。自動販売機は、飲みものを売っている機械に見えますが、実は計算機です。
例えば現金を使う場合、自販機はおおよそこういう計算をしているはずです。
お金が入るのがトリガーで、入ったお金で購入できる商品のボタンを有効にします。私たちは商品を選択しているつもりですが、計算する金額を入力しています。つまり、支払い手続きのなかの、金額の入力をさせられているのです。

最近の自販機は、ICカードを使うと商品を選んでから支払いできますよね。古い自販機は手続き的でしたが、カードを使う場合はこんな感じです。商品を選択することから始まります。コードは増えますが、人間がより直接的に対象に働きかけられるUIになります。

## ビールの場合
でも、これよりもさらに良いデザインもあります。こんな感じです🍻
これだとオブジェクトをすぐに飲むこともできます。

## 本当にそれで完璧なUIになるのか
……、とはいえ、そういうふうに変えていけば、本当に完璧なUIになるのでしょうか。
最初に、電気とともに使いにくいシステムが生まれた、と言いましたが、それに合わせて人間も変化してきました。

“人々の身体は、教育や生産システムによって規律・訓練され、それまでとは違うものになっていき、効率的に、機械のように滞りなく動く身体が理想とされ、次第次第に、その身体を社会の成員全員が持つことが求められるようになった。” 『ファッションの哲学』

私たちがつくるシステムもモダンですから、UIも当然、合理性を追求します。でも、合理性を追求したその先に、使いやすいシステムが生まれるのでしょうか。であれば、UIはいつ完成するのでしょうか。

## UIは変化そのもの
UIは変化してきましたし、これからもずっと変化していきます。終わりもないし、多分、UIが完成することもありません。

私は最近、こんな風に考えています。ユーザーインターフェイスは変化そのものなのだ、と。ユーザーインターフェイスは人間と機械との変化そのものであり、デザイナーはこの変化に自然でいて、この変化が止まらないよう助ける存在なのだ…、と。

そう思うと「運用でカバーする」というのは、UIを固定して変化を止めているようなものです。そういう意味で、UIを止めないで、といいたかったのです。力を抜いて、勢いを感じながらデザインをつづけましょう。

## UIGen
最後に、私が軽い気持ちで作った「UIGen( https://uigen.jp/ )」を紹介します。 エンティティ、プロパティ、アクションを入力するとオブジェクト指向なUIで見せてくれるというシンプルなジェネレーターです。
ありがとうございました。

C6860c38adec703e995505b9afa12c83?s=128

yumemi

September 29, 2020
Tweet

Transcript

  1. ʙ6*σβΠϯͷίϯαϧςΟϯάͰ࿩͢͜ͱʙ VJVYEFTJHOFSTMU  yumemi

  2. ਓؒ ಓ۩ ର৅ )JTUPSZPGUIF#VUUPOIUUQTXXXTMJEFTIBSFOFUCJMMEFSIJTUPSZPGUIFCVUUPOBUTYTX

  3. ର৅ 1階の照明を 点ける! ਓؒ ಓ۩ ৘ใॲཧ

  4. ਓؒ ಓ۩ ⼊⼒する! 照明を点ける! ର৅

  5. 6TFS 6* 0CKFDU

  6. ਓؒ ಓ۩  ͓͕ۚೖͬͨΒॲཧΛ։࢝͢Δ  ͓ۚΛࣝผֹͯۚ͠ΛYʹ୅ೖ  YԁҎԼͷ঎඼ͷϘλϯΛFOBCMFʹ͢Δ  બ୒͞Εͨ঎඼

    Zԁ Λग़͢  ͓ͭΓ YZ Λฦ͢ ߗ՟ॲཧ૷ஔͷཁૉٕज़IUUQTXXXGVKJFMFDUSJDDPKQBCPVUDPNQBOZKJIPV@QEG'&+QEG ⾃販機が処理を実⾏する ために先にお⾦を⼊れな いといけない
  7. ిࢠϚωʔͷηΩϡϦςΟධՁIUUQXXXOFUDEFOEBJBDKQdUBDIJCBOB*/%&9IUNM ର৅ なっちゃん りんご しか勝たん ਓؒ  ߪೖՄೳͳ঎඼ͷϘλϯΛFOBCMFʹͯ͠଴ͭ  ঎඼

    Zԁ ͕બ୒͞ΕΔ  *$ΧʔυͷλονΛ଴ͭ λον͞ΕͨΒΧʔυͷ࢒ߴ Yԁ ΛಡΉ λον͞Εͳ͚Ε͹঎඼ͷબ୒Λղআ͢Δ  YZ͢Δ ݁Ռ͕Ҏ্ͳΒਐΉ ݁Ռ͕ະຬͳΒΤϥʔΛදࣔͯ͠໭Δ  Ͳ͜Ͱ͍͘Β࢖͔ͬͨΛΧʔυʹॻ͘  ঎඼Λग़͢ ಓ۩
  8. None
  9. lਓʑͷ਎ମ͸ɺڭҭ΍ੜ࢈γεςϜʹΑͬͯن཯ɾ܇࿅͞Εɺ ͦΕ·Ͱͱ͸ҧ͏΋ͷʹͳ͍͖ͬͯɺ ޮ཰తʹɺػցͷΑ͏ʹ଺Γͳ͘ಈ͘਎ମ͕ཧ૝ͱ͞Εɺ ࣍ୈ࣍ୈʹɺͦͷ਎ମΛࣾձͷ੒һશһ͕࣋ͭ͜ͱ͕ٻΊΒΕΔΑ͏ʹͳͬͨɻz ʰϑΝογϣϯͷ఩ֶʱ

  10. None
  11. ػց ਓؒ ϢʔβʔΠϯλʔϑΣΠε͸ ਓؒͱػցͱͷมԽͰ͋Γɺ มԽʹ͸ऴΘΓ͕ͳ͍ɻ

  12. IUUQTVJHFOKQ