UIの歴史と将来のUIの形についてまとめてみたよ。

f:id:daikiyano:20190103130920p:plain

皆さんUI・UXはご存知ですか?エンジニアの方であれば、当然知っている単語だと思います。
今回は、UIの歴史と将来のUIの形についてまとめてみました。

そもそもUIとは?

UIとはユーザーインターフェースの略です。

ユーザーインターフェースを更に噛み砕いてみていくと

  • user ・・・使用者・利用者
  • interface ・・・ 境界面・接点・つなぎ目、接触面、中間面

と訳すことができます。インターフェースはつなぎ目や中間面と訳すことができ、一般的にはコンピューターと周辺機器との接続部分を表します。例えば、パソコンとプリンターを繋げるコードもインターフェースの一つですし、ソフトウェアとソフトウェアを繋げるAPI(Application Programming Interface)もインターフェースの一つです。

f:id:daikiyano:20190103123722j:plain
画像出典:https://boxil.jp/mag/a2890/

つまり、UI(ユーザーインターフェース)とは、user(使用者)とdevise(スマホやPC)が上手にコミュニケーションを取れるような役割を果たしています。
サイトを訪問したユーザーを満足させられるかというUX(ユーザーエクスペリエンス)を意識しながら、webデザイナーは使用感を意識したサイトやアプリの視覚デザインの設計とサイトの構築を行なっています。

UIの歴史と今後についてまとめてみたよ

早速、人とデバイス繋げるUI(ユーザーインターフェース)の歴史を今後についてまとめていきます。

  • CLI(Command line Interface/コマンドラインインターフェース)
  • GUI(Graphical User Interface/グラフィカルユーザーインターフェース)
  • NUI(Natural User Interface/ナチュラルユーザーインターフェース)
  • OUI(Organic User Interface/オーガニックユーザーインターフェース)

順に説明していきます。

CLI(Command line Interface/コマンドラインインターフェース)

CLIはwindoesであればコマンドプロンプト、Macであればコマンドと呼ばれるあの黒い画面のことを指します。エンジニアはあの黒い画面にコマンドを入力してデバイスの操作をします。昔のコンピューターはスイッチを入れたら黒い画面に向かって、コマンドを打ちながらOSを操作しなければなりませんでした。CLIは視覚的に操作できませんし、UIを考えると不親切と言えます。未経験でプログラミング学習を始めた私は環境構築をする際にコマンドを操作しないといけないので、あ〜。。って感じで挫折しましたね。

f:id:daikiyano:20190103130057p:plain

黒い画面に苦手意識を持たれている方は以下の記事を参照してみてください!

fjord.jp

GUI(Graphical User Interface/グラフィカルユーザーインターフェース)

f:id:daikiyano:20190103130920p:plain

GUIはグラフィカルユーザーインターフェースの略で、情報やアイコンをグラフィック要素に置き換えたものです。GUIのおかげで私達は視覚的にコンピューターを操作することができます。GUIにはWYSIWYG(what you see is what you get)見たままが得られるというデザイン原則があります。PCのフォルダやファイルのもGUIを使えば、直感的に操作して作成や削除を実行できます。

NUI(Natural User Interface/ナチュラルユーザーインターフェース)

f:id:daikiyano:20190103153013j:plain

NUIはナチュラルユーザーインターフェースの略です。NUIの一部の技術はイスラエル発と言われています。
興味がある方は以下の記事を参照して見てください。

www.for-engineer.life

GUIがWYSIWYGであるのに対してNUIはWYDIWG(what you do is what you get)行ったままが得られるというデザイン原則があります。NUIはGUIよりも更に直感的な操作が可能になったUIです。
スマホのボタンを押す、スクロール、スワイプをする、電車の券売機を購入するためにタッチパネルで操作する、音声入力でテキストする、googleで検索するなど全てNUIによるものです。 現在、NUIは社会の中に浸透し、多くの人々に利用されています。そして、NUIの次に来るUIの形はOUIと言われています。

OUI(Organic User Interface/オーガニックユーザーインターフェース)

NUIの次はOUIが登場してくると言われています。

MicrosoftのDennis WixonさんによるとOUIは以下のように定義されます。

「オーガニックユーザーインターフェイス(OUI)とは、物理的な入力によって変化する、平面ではない表示装置をもっているユーザーインターフェイスである。OUIは、いかなる形にも変化可能な、出力装置であると同時に入力装置としても使えるディスプレイによって特徴づけられる。(An organic user interface (OUI) is a user interface “with non-planar displays that actively or passively change shape via analog physical inputs.” OUIs are characterized by displays that can change or take on any shape and their ability to use the display as an input device.)」

おぉ、イメージしづらい。。。

しかし、OUIを用いたデバイスが2011年に既に登場しています。それが、2011年にカナダのクイーンズ大学が開発したPaperPhoneです。紙のように曲がるスマートフォンです。今年は、折りたたみスマートフォンが流行の一つになるのでそれもOUIの一つと言えるのかも知れませんね。

f:id:daikiyano:20190103154559j:plain

OUIが使われる世界観をイメージするためにマイクロソフトが公開している動画をご紹介します。
マイクロソフトは今後のコンピューティングがどのように進化していくのか、その進化によって私達のライフスタイルがどのように変化しどのような世界が作り出されるのかをイメージし「Productivity Future Vision」という動画を作成して公開しています。

いかかでしたか?
エンジニアやプログラマーが操作する黒い画面はCLI。CLiをより直感的に操作できるのがGUI。
現在、社会に最も浸透されているのがNUI。次に登場するUIがOUIです。
webデザイナーを目指している方はもちろん、エンジニアを目指している方はUIについて知っておくと良いかも知れませんね。

UIについて学べるおすすめの本

最後にUIについて学べるおすすめの本について紹介します。こちらの本は初心者目線で分かりやすく解説されているのでUI・UXについてこれから学ぶという方におすすめの本になります。

  • 参考サイト

UI(ユーザーインターフェース)とは | 種類・ユーザビリティ、UXとの違い – 経営企画・マーケティング | ボクシルマガジン

OUI(オーガニックユーザーインターフェース)とは何なのか? | UX, UI Review

業界人なら知っておこう!UIの流れとこれから -スマホに特化したUIの基礎知識- | ajike switch

Organic user interface – Wikipedia

>文系エンジニア大学生の技術ブログ

文系エンジニア大学生の技術ブログ

社会が多様化していく中、大学生の学生生活も多様であるべきと考えています。主にエンジニア向けにITやプログラミングなどの技術系と大学生向けに休学、留学、海外生活、トビタテ留学、長期インターンに関する記事を書いています。