情報工学特別講義（第１０回目） ２０１１年６月１６日 担当　石原真紀夫 ＨＣＩ研究分野の紹介 人にやさしいユーザインタフェースとは？

Presentation on theme: "情報工学特別講義（第１０回目） ２０１１年６月１６日 担当　石原真紀夫 ＨＣＩ研究分野の紹介 人にやさしいユーザインタフェースとは？"— Presentation transcript:

1 情報工学特別講義（第１０回目） ２０１１年６月１６日 担当　石原真紀夫 ＨＣＩ研究分野の紹介 人にやさしいユーザインタフェースとは？

2 Question: What is HCI ? 1. How Can I? 2. Help Crime Increase
Chat 1.　How Can I? 2.　Help Crime Increase 3.　Host Controller Interface 4.　Human Computer Interaction 5.　Haya~ii Caru~ii AndroId3.0! Law Network Software ?????

3 ? ユーザインタフェースとは？ ユーザとコンピュータを結ぶもの。
たとえば、キーボードやマウスなどのように、人間とコンピュータの間で直接情報を送受信する部分を指します。 （パソコンＩＴ用語辞典２０１０年版より） ? ？に何を使うかで○○ユーザインタフェースと言います。

4 CUI - Character User Interface
ユーザインタフェースとは？ CUI GUI PUI TUI WUI BMI CUI - Character User Interface 命令の入力をキャラクター・ベースで行う ユーザインタフェースのこと。 ・MS DOS ・Linux たとえば、ＤＯＳプロンプトなどでコマンド（命令）を文字で入力することで操作を行います。 dirコマンド フォルダとファイルの一覧を表示するコマンドです。 tree, ver, ipconfigなど様々な命令が準備されています。

5 GUI – Graphical User Interface
ユーザインタフェースとは？ CUI GUI PUI TUI WUI BMI GUI – Graphical User Interface コンピュータの操作に、図形などの視覚情報を利用するインタフェースのこと。 ・MS Windows ・Max OS ・X Window 操作の入力を、アイコンやメニューの選択といった図形情報により行うことができるので、初心者でも使いやすい。 WIMPメタファー ウィンドウとアイコン、メニュー、ポインタをベースとしてGUIを設計する方針のこと。

6 PUI – Perceptual User Interface
ユーザインタフェースとは？ CUI GUI PUI TUI WUI BMI PUI – Perceptual User Interface 次世代ユーザインタフェースの一つ。 コンピュータの操作に、音声や身振り手振り、視線などの知覚情報を利用するインタフェースのこと。 Eye tracking Voice Sign language

7 TUI – Tangible User Interface
ユーザインタフェースとは？ CUI GUI PUI TUI WUI BMI TUI – Tangible User Interface 次世代ユーザインタフェースの一つ。 色も重さもない情報に実在の物体を対応付けて、情報が実体として存在するかのように操作できるインタフェースのこと。 ・BUILD-IT, Morten Fjeld et al.

8 WUI – Web User Interface
ユーザインタフェースとは？ CUI GUI PUI TUI WUI BMI WUI – Web User Interface ユーザインタフェースとしてWebブラウザを利用したインタフェースのこと。 ユーザはブラウザの使い方さえ覚えれば、様々なアプリケーションソフトを使える利点があります。 現在では、様々なアプリがWebブラウザ上で利用できますね。たとえば、メール、ワープロ、表計算。

9 BMI – Brain Machine Interface
ユーザインタフェースとは？ CUI GUI PUI TUI WUI BMI BMI – Brain Machine Interface コンピュータの操作に、脳波を利用するインタフェースのこと。 私たちが集中したり、リラックスしたりするときの脳波の活動状態を解析してコンピュータを操作できます。 at HCII2009 conference Brain waves Monkey's brain controls arm

10 Windowsの進化と ユーザインタフェース
米国マイクロソフト社が開発しているＯＳの名称。 １９８６年にバージョン１が出荷されて以来、事実上の業界標準になっており、パソコンで一般的に使用されている。 （パソコンＩＴ用語辞典２０１０年版より）

11 GUI, Multi-tasking ・MS Windows 1.01 (1985~) Windowsの進化

12 Overlaps windows, Mini-Maximum buttons
・MS Windows 2.1 (1988~)

13 （質問） どっちが押されているように見えますか ? 1. 2. OK OK Windowsの進化
1.　 OK 2.　 OK 古賀直樹、「ＵＩデザインの基礎知識～プログラム設計からアプリケーションデザインまで～」、ファンテック株式会社

14 我々の生活空間では上から下へ光が差し込むことが自然です。太陽は良い例です。
Windowsの進化 （答え） 我々の生活空間では上から下へ光が差し込むことが自然です。太陽は良い例です。 そのため、光は上からあたるものだ！と思い込んでおり、そのように影（濃淡）を解釈して凹凸を感じてしまうのです。

15

16 16 colors, Multimedia (CD-ROM, sound)
Windowsの進化 16 colors, Multimedia (CD-ROM, sound) ・MS Windows 3.0 (1990~)

17 Start menu, Task bar, Desktop folder
Windowsの進化 Start menu, Task bar, Desktop folder ・MS Windows 95 (1995~)

18 Windowsの進化 （質問） どちらを見たとき緊張を感じますか? 1.　 2.　

19 人は丸み帯びたもの見ると心理的な安心感を感じるといわれています。
Windowsの進化 （答え） 人は丸み帯びたもの見ると心理的な安心感を感じるといわれています。 逆に、 人はナイフのような尖ったものを見ると本能的に自己防衛のため緊張を感じるといわれています。

20 True-color, Soften appearance
Windowsの進化 True-color, Soften appearance ・MS Windows XP (2001~)

21 Aero interface, Side bar &Gadgets
Windowsの進化 Aero interface, Side bar &Gadgets ・MS Windows Vista (2007~)

22 Peek, Shake, Snap, Windows Touch
・MS Windows 7 (2009~)

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

24 Windowsの進化 （質問） どちらからリンゴを数えましたか? 1.　左から　 2.　右から

25 Windowsの進化 （実験） 立方体を描いてください。

26 Windowsの進化 （質問） どれに一番近いですか? 1.　 2.　 3.　

27 このように人はものを見るとき、自然と左から右に向かって認知しています。
Windowsの進化 （解説） このように人はものを見るとき、自然と左から右に向かって認知しています。 この人の性質は、 たとえば、再生ボタン プログレスバーの進行方向 に利用されています。

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

29 触れる（タッチ）と、それが入力とみなされるスクリーンのこと。
ユーザインタフェース 支える機器 Touch Screen -- GUI 触れる（タッチ）と、それが入力とみなされるスクリーンのこと。 スクリーン上のタッチした場所がポイントした位置になるため、 自然でわかりやすい利点がある。 Apple iPad

30 （質問） どのようなジェスチャーを想像しますか？ 1. Before After ユーザインタフェース 支える機器
1.　 Before After from Prof. D. Wigdor (Microsoft) as Invited talk, AVI2010, Roma, Italy

31 （質問） どのようなジェスチャーを想像しますか？ 2. Before After ユーザインタフェース 支える機器
2.　 Before After from Prof. D. Wigdor (Microsoft) as Invited talk, AVI2010, Roma, Italy

32 （質問） どのようなジェスチャーを想像しますか？ 3. Before After ユーザインタフェース 支える機器
3.　 Before After from Prof. D. Wigdor (Microsoft) as Invited talk, AVI2010, Roma, Italy

33 人間の手の動作を読み取ることができるセンシング機器のこと。 手袋のように手に装着して使用します。
ユーザインタフェース 支える機器 Data Glove -- PUI 人間の手の動作を読み取ることができるセンシング機器のこと。 手袋のように手に装着して使用します。 加速度センサや曲率センサにより、手の傾きや各指の曲がり具合を読み取ることができます。 仮想物をつまんで動かしたり、持ち上げていろんな角度から観察したりすることを直感的に行えます。 ADGTech VHand

34 Force Feedback Device -- PUI
ユーザインタフェース 支える機器 Force Feedback Device -- PUI 振動や力を人に伝える機器のこと。 ゲームパッドやジョイスティック、ハンドル型コントローラ,マウス、トラックボールなど様々な入力機器と組合わせて使用されます。 重さのない仮想物に重みを加えたり、その固さや柔らかさを感じることができます。 Novint Falcon

35 Eye Tracking Device -- PUI
ユーザインタフェース 支える機器 Eye Tracking Device -- PUI 人間の視線を読み取ることができるセンシング機器のこと。 メガネのように頭に装着して使用します。 見ている箇所をクリックしたり、注目している領域に応じた情報を表示したりできます。 NAC EMR9

36 Camera Based Input Device -- PUI
ユーザインタフェース 支える機器 Camera Based Input Device -- PUI カメラ画像を用いて人の様々な動作を読み取る機器のこと。 マイクロソフトのKinectやソニーのMoveが有名です。 人はコントローラを持ったり、余分なセンサを身に着ける必要がなく、身振り手振りで機器に命令を出すことができます。 Microsoft XBox360 Kinect Hands are the new remote control

37 ユーザインタフェース 支える機器 （質問） どっちが読み易いですか? 1.　 2.　

38 人の視野は、水平方向に広く、垂直方向は狭くなっています。この人の特性が読み易さや読みにくさに影響しています。
ユーザインタフェース 支える機器 （解説） 人の視野は、水平方向に広く、垂直方向は狭くなっています。この人の特性が読み易さや読みにくさに影響しています。 画面サイズ ４：３ 70度 60度 100度 画面サイズ １６：９

39 Head Mounted Display & CAVE System
ユーザインタフェース 支える機器 Head Mounted Display & CAVE System 人の左目と右目の視野に視差のある別々の画像を提示して、立体的な仮想世界を表示する機器のこと。 人は仮想世界の中に入り込んでいるかような感覚を得ることができます。 Remote Impact game in action eMagin Z800 3DVisor

40 iPadには説明書が入っていないんです！！
ユーザインタフェースと アフォーダンス アフォーダンスとは、その物体を使って何ができるのかを伝える知覚的な明示のこと。 アフォーダンスをうまく考えて作られた機器は見てその使い方を自然に推測できるため、分厚い取扱い説明書の必要がなくなります。 iPadには説明書が入っていないんです！！ （※）コンストレイントとは、その物体を使って何ができないのかを伝える知覚的な明示のこと。

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

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

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

44 Experience-centered design
私の研究 Experience-centered design Window Metaphor ~ Zoom Window Metaphor ~ Scroll M. Ishihara et al, “Porthole: A spatial interface to provide scrolling, zooming-in, and zooming-out”, 2005

45 User friendly design & Direct manipulation
私の研究 User friendly design & Direct manipulation MS Paint on Projection Map Viewer on Projection M. Ishihara et al, “Fingertip-shadow for click, db-click, and drag on a wall”, 2005

46 国際会議 Oral session Poster session

47 SMART Table Demo Exhibition Spherical Display 国際会議 SMART Technologies
UIST2008, Monterey, CA, USA Demo Exhibition Spherical Display Microsoft Research UIST2008, Monterey, CA, USA

48 Ethnic dance and music Banquets
国際会議 Ethnic dance and music Banquets Ethnic dance Banquets, IASTED, Innsbruck, Austria

49 国際会議 The Colloseum Palatine Hill

50 Glacier Venetia Innsbruck town Swarovski Crystal Aircraft carrier
国際会議 Glacier Venetia Innsbruck town Swarovski Crystal Aircraft carrier MIDWAY

51 ＣＧで作られた仮想物を現実空間に重ね合わせて表示する技術のこと。
拡張現実感 ＣＧで作られた仮想物を現実空間に重ね合わせて表示する技術のこと。 拡張現実 現実の大学キャンパス Quake I 仮想空間 Photos from ARQuake project, Wearable Computer Lab, University of South Australia

52 仮想空間に現実のものが置かれているイメージ 拡張仮想感
拡張現実感 ★拡張現実感の位置付け 現実感 現実空間に仮想物が置かれているイメージ 拡張現実感 混合現実感 仮想空間に現実のものが置かれているイメージ 拡張仮想感 仮想現実感

53 G ★ARToolkitを用いた拡張現実感の仕組み AR Toolkit ・ARを手軽につくるためのソフトウェアライブラリ ・フリーウェア
・C, Java, OpenGL overlay G マーカー

54 G １）パソコンはマーカーの模様とそのサイズを予め知っています。 たとえば、 「マーカーは、８ｃｍ×８ｃｍでＧマークの模様」 拡張現実感
8cm

55 拡張現実感 ２）マーカーの模様データを使ってカメラ画像からマーカーの場所を探します。 カメラ画像 G G G 8cm マーカー

56 拡張現実感 ３）マーカーのサイズデータを使ってマーカーまでの距離と姿勢を計算します。遠くにあればマーカーは小さく映り、傾いていれば台形のように歪んで映ります。 カメラ画像 G G G 8cm マーカー

57 G G ４）仮想世界を作り、マーカーとまったく同じ距離、姿勢の位置に仮想物を描きます。 拡張現実感 カメラ画像 仮想カメラ 仮想世界

58 拡張現実感 ５）仮想カメラからみたＣＧを生成します。 カメラ画像 G G 仮想カメラ ＣＧ画像 仮想世界 マーカー

59 拡張現実感 ６）最初のカメラ画像の上にＣＧ画像を上書きします。 カメラ画像 G G G ＣＧ画像 マーカー 拡張現実画像！！

60 デ　　　モ ★ARアプリ ★Androidアプリ 以上で終わります。