情報工学特別講義（第１０回目）２０１１年６月１６日

担当　石原真紀夫

ＨＣＩ研究分野の紹介

人にやさしいユーザインタフェースとは？

Question: What is HCI ?

1. 　 How Can I?

2. 　 Help Crime Increase

3. 　 Host Controller Interface

4. 　 Human Computer Interaction5. 　 Haya~ii Caru~ii AndroId3.0!

Chat

Law

Network

Software

?????

ユーザとコンピュータを結ぶもの。たとえば、キーボードやマウスなどのように、人間とコンピュータの間で直接情報を送受信する部分を指します。

（パソコンＩＴ用語辞典２０１０年版より）

ユーザインタフェースとは？

?

？に何を使うかで○○ユーザインタフェースと言います。

CUI - Character User Interface

ユーザインタフェースとは？

命令の入力をキャラクター・ベースで行うユーザインタフェースのこと。

たとえば、ＤＯＳプロンプトなどでコマンド（命令）を文字で入力することで操作を行います。

dir コマンドフォルダとファイルの一覧を表示するコマンドです。tree, ver, ipconfig など様々な命令が準備されています。

・ MS DOS・ Linux

GUICUI PUI TUI WUI BMI

・ MS Windows・ Max OS

・ X Window

ユーザインタフェースとは？

GUI – Graphical User Interface

コンピュータの操作に、図形などの視覚情報を利用するインタフェースのこと。操作の入力を、アイコンやメニューの選択といった図形情報により行うことができるので、初心者でも使いやすい。

WIMPメタファーウィンドウとアイコン、メニュー、ポインタをベースとして GUIを設計する方針のこと。

CUI GUI PUI TUI WUI BMI

Signlanguage

Eyetracking

Voice

ユーザインタフェースとは？

PUI – Perceptual User Interface

次世代ユーザインタフェースの一つ。コンピュータの操作に、音声や身振り手振り、視線などの知覚情報を利用するインタフェースのこと。

CUI PUIGUI TUI WUI BMI

・ BUILD-IT, Morten Fjeld et al.

TUI – Tangible User Interface

次世代ユーザインタフェースの一つ。色も重さもない情報に実在の物体を対応付けて、情報が実体として存在するかのように操作できるインタフェースのこと。

ユーザインタフェースとは？CUI TUIGUI PUI WUI BMI

ユーザインタフェースとは？

WUI – Web User Interface

ユーザインタフェースとしてWebブラウザを利用したインタフェースのこと。ユーザはブラウザの使い方さえ覚えれば、様々なアプリケーションソフトを使える利点があります。

現在では、様々なアプリがWebブラウザ上で利用できますね。たとえば、メール、ワープロ、表計算。

CUI WUIGUI PUI TUI BMI

Brain waves

BMI – Brain Machine Interface

コンピュータの操作に、脳波を利用するインタフェースのこと。

私たちが集中したり、リラックスしたりするときの脳波の活動状態を解析してコンピュータを操作できます。

at HCII2009 conference

ユーザインタフェースとは？CUI BMIGUI PUI TUI WUI

Monkey's brain controls armhttp://news.bbc.co.uk/2/hi/science/nature/7426822.stm

米国マイクロソフト社が開発しているＯＳの名称。１９８６年にバージョン１が出荷されて以来、事実上の業界標準になっており、パソコンで一般的に使用されている。

（パソコンＩＴ用語辞典２０１０年版より）

Windows の進化とユーザインタフェース

http://www.saunalahti.fi/janij/blog/images/2008_nov_windows_1_0.png

・ MS Windows 1.01 (1985~)

GUI, Multi-tasking Windows の進化

http://osxbook.com/book/bonus/ancient/vpc/images/win21.gif

・ MS Windows 2.1 (1988~)

Overlaps windows, Mini-Maximum buttons Windows の進化

（質問）どっちが押されているように見えますか ?

1.　

OK 2.　

OK

Windows の進化

古賀直樹、「ＵＩデザインの基礎知識～プログラム設計からアプリケーションデザインまで～」、ファンテック株式会社

（答え）我々の生活空間では上から下へ光が差し込むことが自然です。太陽は良い例です。

そのため、光は上からあたるものだ！と思い込んでおり、そのように影（濃淡）を解釈して凹凸を感じてしまうのです。

Windows の進化

http://catb.org/~esr/writings/taouu/html/graphics/win30progman.png

・ MS Windows 3.0 (1990~)

16 colors, Multimedia (CD-ROM, sound) Windows の進化

http://cybernetnews.com/wp-content/uploads/2006/10/Windows95.jpg

・ MS Windows 95 (1995~)

Start menu, Task bar, Desktop folder Windows の進化

（質問）どちらを見たとき緊張を感じますか ?

1.　

2.　

Windows の進化

（答え）人は丸み帯びたもの見ると心理的な安心感を感じるといわれています。

逆に、人はナイフのような尖ったものを見ると本能的に自己防衛のため緊張を感じるといわれています。

Windows の進化

True-color, Soften appearance

http://www.winsupersite.com/images/reviews/wxp_rtm_home_004.gif

・ MS Windows XP (2001~)

Windows の進化

http://www.otterbein.edu/ITS/images/vista-screen.jpg

・ MS Windows Vista (2007~)

Aero interface, Side bar &GadgetsWindows の進化

http://screenshots.winfuture.de/Windows-7-Build-6.1.7048-1235994358.jpg

・ MS Windows 7 (2009~)

Peek, Shake, Snap, Windows TouchWindows の進化

（実験）リンゴの数を数えてください。

Windows の進化

（質問）どちらからリンゴを数えましたか ?

1. 　左から　 2. 　右から

Windows の進化

（実験）立方体を描いてください。

Windows の進化

（質問）どれに一番近いですか ?

1.　

2.　

Windows の進化

3.　

（解説）このように人はものを見るとき、自然と左から右に向かって認知しています。

この人の性質は、たとえば、再生ボタンプログレスバーの進行方向に利用されています。

Windows の進化

現在、我々は主にキーボードやマウス、ディスプレイを用いて、コンピュータと情報のやり取りをします。これ以外にも様々な機器が新しいユーザインタフェースを支えています。

新しいユーザインタフェースを支える様々機器

ユーザインタフェース 支える機器

Touch Screen -- GUI

触れる（タッチ）と、それが入力とみなされるスクリーンのこと。

スクリーン上のタッチした場所がポイントした位置になるため、自然でわかりやすい利点がある。

Apple iPad

1.　

Before After from Prof. D. Wigdor (Microsoft) as Invited talk, AVI2010, Roma, Italy

ユーザインタフェース 支える機器

（質問）どのようなジェスチャーを想像しますか？

Before After from Prof. D. Wigdor (Microsoft) as Invited talk, AVI2010, Roma, Italy

ユーザインタフェース 支える機器

（質問）どのようなジェスチャーを想像しますか？2.

　

Before After from Prof. D. Wigdor (Microsoft) as Invited talk, AVI2010, Roma, Italy

ユーザインタフェース 支える機器

（質問）どのようなジェスチャーを想像しますか？3.

　

ユーザインタフェース 支える機器

Data Glove -- PUI

人間の手の動作を読み取ることができるセンシング機器のこと。手袋のように手に装着して使用します。加速度センサや曲率センサにより、手の傾きや各指の曲がり具合を読み取ることができます。

ADGTech VHand

仮想物をつまんで動かしたり、持ち上げていろんな角度から観察したりすることを直感的に行えます。

ユーザインタフェース 支える機器

Force Feedback Device -- PUI

振動や力を人に伝える機器のこと。

ゲームパッドやジョイスティック、ハンドル型コントローラ ,マウス、トラックボールなど様々な入力機器と組合わせて使用されます。

Novint Falcon

重さのない仮想物に重みを加えたり、その固さや柔らかさを感じることができます。

ユーザインタフェース 支える機器

Eye Tracking Device -- PUI

見ている箇所をクリックしたり、注目している領域に応じた情報を表示したりできます。

NAC EMR9

人間の視線を読み取ることができるセンシング機器のこと。メガネのように頭に装着して使用します。

ユーザインタフェース 支える機器

Camera Based Input Device -- PUI

カメラ画像を用いて人の様々な動作を読み取る機器のこと。マイクロソフトの KinectやソニーのMoveが有名です。人はコントローラを持ったり、余分なセンサを身に着ける必要がなく、身振り手振りで機器に命令を出すことができます。

Microsoft XBox360 KinectHands are the new remote controlhttp://news.bbc.co.uk/1/hi/programmes/click_online/7820866.stm

（質問）どっちが読み易いですか ?

ユーザインタフェース 支える機器

1.　2.　

（解説）人の視野は、水平方向に広く、垂直方向は狭くなっています。この人の特性が読み易さや読みにくさに影響しています。

ユーザインタフェース 支える機器

100度 100度

70度

60度

画面サイズ４：３

画面サイズ１６：９

ユーザインタフェース 支える機器

Head Mounted Display & CAVE System人の左目と右目の視野に視差のある別々の画像を提示して、立体的な仮想世界を表示する機器のこと。

人は仮想世界の中に入り込んでいるかような感覚を得ることができます。

eMagin Z800 3DVisor

Remote Impact game in actionhttp://news.bbc.co.uk/go/em/fr/-/2/hi/uk_news/scotland/7423404.stm

アフォーダンスとは、その物体を使って何ができるのかを伝える知覚的な明示のこと。

ユーザインタフェースとアフォーダンス

アフォーダンスをうまく考えて作られた機器は見てその使い方を自然に推測できるため、分厚い取扱い説明書の必要がなくなります。

iPadには説明書が入っていないんです！！

（※）コンストレイントとは、その物体を使って何ができないのかを伝える知覚的な明示のこと。

アフォーダンス

★アフォーダンスの実例１

アフォーダンス

★アフォーダンスの実例２

アフォーダンス

★アフォーダンスの実例２

私の研究

Experience-centered design

M. Ishihara et al, “Porthole: A spatial interface to provide scrolling, zooming-in, and zooming-out”, 2005

Window Metaphor ~ Scroll

Window Metaphor ~ Zoom

私の研究

User friendly design & Direct manipulation

M. Ishihara et al, “Fingertip-shadow for click, db-click, and drag on a wall”, 2005

Map Viewer on Projection

MS Paint on Projection

国際会議

Poster session

Oral session

国際会議

Demo

Spherical DisplayMicrosoft ResearchUIST2008, Monterey, CA, USA

SMART TableSMART Technologies

UIST2008, Monterey, CA, USA

Exhibition

国際会議

Banquets

Ethnic dance and music

Ethnic danceBanquets, IASTED, Innsbruck, Austria

国際会議

Palatine Hill

The Colloseum

国際会議

GlacierVenetia

Swarovski Crystal

Aircraft carrierMIDWAY

Innsbruck town

ＣＧで作られた仮想物を現実空間に重ね合わせて表示する技術のこと。

拡張現実感

現実の大学キャンパス

Quake I

仮想空間

拡張現実

Photos from ARQuake project, Wearable Computer Lab, University of South Australia

現実感

拡張現実感

拡張仮想感

仮想現実感

拡張現実感

混合現実感

現実空間に仮想物が置かれているイメージ仮想空間に現実のものが置かれているイメージ

★拡張現実感の位置付け

G

overlay

拡張現実感

★ARToolkit を用いた拡張現実感の仕組み

マーカー

AR Toolkit・ AR を手軽につくるためのソフトウェアライブラリ・フリーウェア・ C, Java, OpenGL

拡張現実感

１）パソコンはマーカーの模様とそのサイズを予め知っています。

たとえば、「マーカーは、８ｃｍ× ８ｃｍでＧマークの模様」

Gマーカー

8cm

8cm

拡張現実感

２）マーカーの模様データを使ってカメラ画像からマーカーの場所を探します。

G

マーカー

G

カメラ画像

G8cm

8cm

拡張現実感

３）マーカーのサイズデータを使ってマーカーまでの距離と姿勢を計算します。遠くにあればマーカーは小さく映り、傾いていれば台形のように歪んで映ります。

G

マーカー

G

カメラ画像

G8cm

8cm

拡張現実感

４）仮想世界を作り、マーカーとまったく同じ距離、姿勢の位置に仮想物を描きます。

G

マーカー

G

カメラ画像

仮想カメラ

仮想世界

拡張現実感

５）仮想カメラからみたＣＧを生成します。

G

マーカー

G

カメラ画像

仮想カメラ

仮想世界

ＣＧ画像

拡張現実感

６）最初のカメラ画像の上にＣＧ画像を上書きします。

G

マーカー

G

カメラ画像

ＣＧ画像

G

拡張現実画像！！

以上で終わります。

デ　　　モ

★AR アプリ

★Android アプリ