見出し画像

モバイルNUIパラダイムの登場 [2020.6.9]

4. ユーザーインタフェースの進化
5. モバイルNUIパラダイムの登場
6. 過去・現在のコンピューティングパラダイム

今日は、学生のみなさんが毎日使い、おそらくライフラインにすらなっている「モバイル」と、そのUIやUX(ユーザー・エクスペリエンス)について考えていきます。
モバイルの時代のユーザー・インタフェースのデザインについて書かれた、「モバイルフロンティア よりよいモバイルUXを生み出すためのデザインガイド」(安藤幸央,佐伸哉 監訳、青木博信 ,清水かほる 訳、丸善出版,2013)を参照しながら学んでいきます。
原著(英語)の「The Mobile Frontier  A Guide for Designing Mobile Experiences」は2012年に出版された本で、著者の Rachel Hinman(レイチェル・ヒンマン)はリサーチャー、デザイナーとして長年モバイルUXの分野に携わっており、adaptive path、NOKIA、Intelなどを経て、現在は Rakuten RewardsのDirector of Product Design を務めています。

4. ユーザーインタフェースの進化

ヒンマンが取り上げたデニス・ウィクソン(Dennis Wixon)の講演の中から、ユーザー・インターフェイスの進化について見ていきます。ウィクソンによる分類は以下の4つです。

CLI(Command Line Interface:コマンドラインインターフェース)
GUI(Graphical User Interface:グラフィカルユーザーインターフェース)
NUI(Natural User Interface:ナチュラルユーザーインターフェイス)
OUI(Organic User Interface:オーガニックユーザーインターフェース)
(モバイルフロンティア p20-21)

コマンドラインインターフェース(CLI)

テキストをキーボードでタイプすることによってコンピュータに命令を送るインタフェースです。プログラムを書くひとは見たことがある画面かもしれませんが、ふだんMacやWindowsでアプリケーションを使っている人にはほぼ馴染みがなく、CLIの真っ黒(もしくは真っ白)な画面を前にしたら、何をしたらいいかわからないでしょう。CLIではコマンドを知らなければなにもできず、その習得には時間がかかります。
下記は、CLIの一般的な説明です。

逆に、コマンドを学び熟知している人にとっては、すべてがキーボード入力で行なえる、表示が文字だけなので動作が軽い、繰り返しの処理が容易など様々な利点があり、いまでももちろん使われているインタフェースです。

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

前回のマッキントッシュの説明でも用語が出てきましたが、画面上に表示されたアイコンやウィンドウ、ツールパレットやメニューなどを、主にマウスでクリックして操作するインタフェースです。MacもWindowsもGUIを採用しています。
以下はGUIの一般的な説明です。

GUIでは(CLIとは異なり)操作に必要なものはあらかじめ画面上に表示されているので、そこから操作方法を選べばよく(再認)、操作に必要なコマンドを全て覚えておいて都度思い出す(再生)必要はありません。
GUIにも進化の歴史があり、みなさんが2020年に使っているGUIは、進化を遂げかなり洗練されたものです。初期のMacintoshのGUIや、さらにそれ以前、ゼロックス(XEROX)のAltoというマシンで実現されていたGUIを見ると、GUIというインタフェースの生い立ちをしることができます。

以下は、初期のMacintosh(GUI)のエミュレーターを集めたサイト「Early Macintosh Emulation Comes to the Archive」です。当時のGUIを疑似的に体験できます。例えば、MacOSのSystem6(1988年)はこのようなGUIでした。

当時のシステムを知るひとは、読み込み時間や画面の反応時間を含めてまさにこんなだったと懐かしさを感じると思いますが、いまの学生のみなさんにはこの粗い画面や反応の遅さは信じられないかも知れません(でもこのMacOSでみんなデザイン作業をしていました)。

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

NUIは用語としてはあまり世の中に広まっておらず、単に「NUI」といってもわかる人は少ないかもしれません。ここでは「NUIの考え方」を中心にみていきます。
NUIの特徴は、タッチパネルやジェスチャーなどによって直接的に情報を操作でき直観的に使うことができる点です。日常生活でオブジェクト(モノ)に触れるように情報に触れることができる「自然(Natural)なインタフェース」と解釈すれば、スマートフォンや、タブレット端末とペンなどのインタフェースは、NUIに該当すると考えられます。

ヒンマンは本の中で次のように述べています。

2007年1月、ある新製品が発表され、コンピューターとユーザーインターフェース双方のトレンドを変えてしまうほどの影響力を持つようになりました。iPhoneは反応の良いマルチタッチスクリーン、直感的なUI、ジェスチャーによるインターフェースを備えた消費者向けの電子機器の中で、一番はじめに商業的な成功を収めました。iPhoneはNUIという新しいタイプのインターフェースを、一番はじめに人々に体験させたのです。(モバイルフロンティア p24)

iPhoneに関して、いくつか参考になるサイトを紹介しておきます。

以下は、iPhone発表時のジョブズのプレゼンテーションです(iTunesが開きます)。(非公式な動画がネットに上がっていますが、公式のリンクを紹介しておきます。)
iTunes Apple keynote podcastより Macworld San Francisco 2007 keynote Steve Jabs

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

OUIは、NUIの次に来るインタフェースとして予測を含めて紹介されています。入力と出力の間に明確な区切りがなく,オブジェクトは有機的であるといわれています。(同書 p24)

本の書かれた2012年から時間が経っていますが、現在みなさんの周りに「これはOUIだな。」と言えるものは存在しているでしょうか?それとも予測は外れたのでしょうか? 最近、利用が増えてきているVUI(ボイスユーザーインターフェイス)やVR(バーチャル・リアリティ)などは、NUIに取って代わる次のインタフェース(OUI的なもの)なのでしょうか?

5. モバイルNUIパラダイムの登場

ヒンマンは、NUIという新しいタイプのインタフェースに関して、デザイン原則として次の「NUIの8原則」を紹介しています。(英語表記は原著より)[ ]内は吉橋による要約。
(※パラダイムは、その時代の考え方の枠組みのことです)

NUI の原則
1. パフォーマンス重視の原則(Principle of Performance Aesthetics):
[楽しみながら操作すること。]
2. 直接的な操作の原則(Principle of Direct Manipulation):
[情報をオブジェクトとして直接操作できること。]
3. 足場組みの原則(Principle of Scaffoldings):
[指示やガイドによって、次のインタラクションをユーザーに暗示し予測させる。]
4. 状況を考慮した環境の原則(Principle of Contextual Environments):
[場所や時間(コンテクスト)に応じて、次のインタラクションを示唆する。]
5. スーパーリアルの原則(Principle of Super Real):
[ピンチやズームのようなジェスチャーによるリアルさ。]
6. ソーシャルインタラクションの原則(Principle of Social Interaction):
[タブレットなどのようにひとりだけの利用以外にもソーシャルな(複数人での)利用にも拡張される。]
7. 空間関係の原則(Principle of Spatial Relationships):
[情報がオブジェクトとして表示され、情報そのものに触れることができる場合がある。]
8. シームレスの原則(Principle of Seamlessness):
[タッチスクリーンやジェスチャー入力などによって、ユーザーと情報との間の壁が低くシームレスだと感じる。]

iPhoneなどのデバイスをユーザーとして使うだけなら自然に使えることを享受すればよいだけで、これらの原則を特に意識する必要はありません。ただし、アプリやOSなどを「デザインする」側に立つと見えてくる世界は変わります。どのようにすれば、NUIの特徴を活かすことができ、より自然な理解や操作を実現することができるか?自分ならどうデザインするか?を検討する必要があります。デザイナーの視点で、手元にあるスマホの様々なアプリについて、これらの8つの原則に沿ってデザインされているかどうかを考えてみてください。

6.  過去・現在のコンピューティングパラダイム

ビル・ヴァープランク(Bill Verplank)とビル・モグリッジ(Bill Moggridge)による、3つのフレームワークが紹介されています(同書 p30-32)
ふだん使っているPCやスマホには様々な機能が実装されていますが、このような分類の枠組みでそれらを見直してみると、コンピュータとはなにか?どのようにインタラクションしていくのか?を考える助けになります。

・人としてのコンピュータ
・ツールとしてのコンピュータ
・メディアとしてのコンピュータ

SiriやGoogleアシスタントは(進化の途上ですが)賢いエージェント()のようにふるまうことがあります。
illustratorで絵を描き、画像加工のアプリを使い、SNSは他者とのコミュニケーショを取るためのツール(道具)になります。
アプリでニュースを読み、配信される音楽やラジオを聴きます。ネットで動画を見ない日は無いのではないでしょうか?もはやメディアそのものです。
それぞれについて細かな説明をしなくとも、生活の中でスマホを使っているみなさんなら感覚的に理解できると思います。

これらは、コンピュータを「何に見立てるか?」というものの見方(フレーム)を提供するものですが、それぞれの特性を理解することでデザインに応用することができます。デザイナーとして、自分がデザインしている対象(アプリやサービス)が、人のような賢いエージェントを目指すものなのか、合理的で便利なツールを作るのか、配信等のためのプラットフォームやメディアなのかを正しく把握して、それぞれにふさわしいデザインを考えていくとよいでしょう。

ちなみに、古くはAppleのナレッジナビゲーターから現在に至るまで、「賢い」コンピューター(いまならAI)が人の生活や仕事をサポートする、という将来のビジョンを示すムービーが各社から発表されています。みなさんはこのような未来をどう思うでしょうか?

まとめ

コンピューターのユーザー・インタフェースの進化と、モバイルのパラダイムについて見てきました。学生のみなさんが毎日身につけて生活している「スマートフォン」は生活に大きな変化をもたらしましたが、まだわずか十数年の歴史しかありません。現在の「モバイル」の特性を知ったうえで、それらのインタフェースを適切にデザインすることは、デザイナーの大切な役割のひとつです。
これからデザイナーになるみなさんには、この先の技術の進化やコンピューターの進化を考えながら、次のユーザー・インターフェースやインタラクションを考えること、ユーザーや社会との関係性を考えていくことが期待されていますし、それはまた「スマホネイティブ」世代のデザイナーの使命ではないでしょうか。

●考えてみましょう

もし、あなたがNUIの「次」のインタフェース(OUI的なもの)について、開発プロジェクトのメンバーに任命されたら、どんなことをデザインしたいですか? また、それには、テクノロジーの要素以外に、どんなリサーチや研究が必要になるでしょうか?

●配布資料について(Classroomより配布)

(「モバイルフロンティア」より)
資料と講義ノートを併用して理解を深めてください。

参考図書

さらに学びたいひと向けの参考図書を紹介します。これまでのGUIとはちがうインタフェースを指向している本です。興味がある人は手に取ってみてください。(どちらも図書館に蔵書あり)

おわりに

来週は、入出力のインタフェースとして、様々な入力・出力のためのテクノロジーとユーザーインタフェースを見ていきます。事例編は来週でひとまず終わり、その後は理論編に入り人間の認知のしくみについて学んでいきます(必要に応じて事例を提示します)。