インタフェース設計論　第 4 回 CUI と GUI ～人に優しいインタフェース・デザインに向けて～

インタフェース設計論　第4回CUIとGUI～人に優しいインタフェース・デザインに向けて～インタフェース設計論　第4回CUIとGUI～人に優しいインタフェース・デザインに向けて～政策・メディア研究科博士1年塚田浩二

自己紹介 • 塚田浩二 • 政策・メディア研究科博士課程1年（安村研究室） • <http://mobiquitous.com/~tsuka/> • 関心領域 • 実世界指向インタフェース • インスタレーション • 発明的研究（ガジェット作り）

過去の活動(抜粋) • 実世界指向インタフェース • Ubi-Finger，Active Belt • インスタレーション • Augmented Garden • ガジェット作り • 廃れるリンク, 顔アイコン(@ Sony CSL)

講義の流れ（全体） • 第4回　 CUIとGUI　～人に優しいインタフェース・デザインに向けて～ • 第5回　さまざまな入出力インタフェース • 第9回　バーチャル・リアリティとインタラクティブ・アート • 第10回モバイル/ユビキタスと実世界指向インタフェース

講義の流れ（今回） • ユーザインタフェースの歴史 • 第1世代～第5世代 • CUIとGUI • 特徴，直接操作，アイコン • 人に優しいインタフェースの設計に向けて • 習慣，モード，モノトニー，統一化

参考文献 • Jakob Nielsen(著), 篠原稔和他(訳)，ユーザビリティエンジニアリング原論 • 田村博(編), ヒューマンインタフェース • Jef Raskin(著), 村上雅章(訳)，ヒューメイン・インタフェース

ユーザインタフェースの歴史 • 第1世代: バッチシステム • 第2世代: ライン指向インタフェース • 第3世代: 全画面インタフェース • 第4世代: グラフィカル・ユーザインタフェース(GUI) • 第5世代: 次世代型インタフェース CUI

ポイント • 新しい技術の登場＋古い技術の再利用 • 古い世代のインタラクション技法の多くは、今でも再利用されている．

第1世代:　背景 • 計算機: 真空管式コンピュータ • 年代: 1945～1955年頃 • ユーザ層：コンピュータ専門家 • 備考: • パンチ・カード・システムからコンピューターへの移行順序選択式電子計算機(SSEC)

第1世代:バッチシステム • 定義: コンピュータでバッチ作業(プログラム)を起動する． • 全コマンドを処理結果がわかる前に特定する． • ゼロ次元のインタフェース • インタラクティブ性はない • 特徴: ユーザの途中操作を必要としない • 同じ作業を何度も行うには便利

第2世代: 背景 • 計算機: トランジスタ式コンピュータ • 年代: 1955～1965年頃 • ユーザ層: コンピュータ専門家 • 備考:タイム・シェアリングシステム • 複数のユーザが一台のコンピュータを同時に利用． • ユーザ・インタフェースに利用できるリソースは少ない． IBM STRETCH

第2世代:ライン指向インタフェース • 定義:一行のコマンドラインのみでユーザと対話を行う • 質疑応答やコマンド言語を用いる． • 1次元のインタフェース • 過去の入力や，出力後のデータは変更できないライン指向インタフェースの例

質疑応答 • ユーザがコンピュータの質問に一つずつ答える． • 特徴: • コンピュータがユーザをナビゲーションする • 不定期利用ユーザ向け • 問題点: • 次の質問がわからない＆前の答えを変更しにくい． • ex.)　市を入力してください． • 市だけでなく，州や郵便番号をすべて入れてしまう

コマンド言語 • コマンド名と引数（パラメーター）を用いる • ex.) copy A B delete A • 特徴: • 複雑な処理をサポートできる． • 編集可能で、履歴を再利用できる． • 問題点: • 学習が難しい．後で詳しく説明

第3世代: 背景 • 計算機: 集積回路コンピュータ • 年代: 1965-1980年頃 • ユーザ層: コンピュータ知識のない専門家 • ex.) 銀行窓口 • 備考: コンピュータのビジネス利用がはじまる． IBMシステム/360

第3世代: 全画面インタフェース • 定義: 画面上の全領域を用いて対話を行う． • 2次元のインタフェース • フォーム入力のダイアログ形式 • 画面上のラベル領域を，自由な順序で編集できる • メニュー・ファンクションキーの導入全画面インタフェースの例

ファンクションキー • 画面上にキーとコマンドの割り当てを表示し，キーボードで入力する手法 • 特徴: • 数種類のコマンド入力が速くなる． • 柔軟性はないファンクションキーの一例

メニュー • システムが提示するコマンド群を、ユーザが選択する． • 特徴: • 学習が容易． • 問題点 • 熟練者にとっては煩わしい. 後で詳しく説明

第4世代: 背景 • 対象: パーソナル・コンピュータ • 年代: 1980-200X(?)年頃 • ユーザ層: ビジネスマン，趣味人 • 備考: 個人がパーソナルコンピュータを購入できるようになる． RISCシステム/6000ファミリー PS/55note

第4世代:グラフィカル・ユーザインタフェース(GUI)第4世代:グラフィカル・ユーザインタフェース(GUI) • 定義: 複数のウインドウを重ねた，3次元に近い　　　　空間で直接操作により対話を行う． • 2.5次元のインタフェース • 後ろのウインドウは原則一番上にしないと中身が見えない. • WIMP（Windows, Icon, Menu, Pointing Device)から構成される．後で詳しく説明 WIMPを用いたGUI

第5世代: 背景 • 計算機: • 没入型システム，ユビキタス・コンピューティング，ウェアラブル・コンピューティング，情報家電など • 年代: 200X(?)年～ • ユーザ層: 誰でも • 備考: • コンピュータの利用形態の多様化と，生活空間への浸透．

第5世代: 次世代型インタフェース • 没入型インタフェース • 実世界指向インタフェース

没入型インタフェース • 仮想世界に人間を引き込むアプローチ • Virtual Realityなど • ゲーム，インタラクティブ作品などに利用 Cave HMDとデータグローブ

実世界指向インタフェース • 生活空間にコンピュータの世界を引き出す手法 • Augmented Reality, Tangible Bit …etc • 人間の空間認識能力や，身体性を活用 • ユビキタス / ウェアラブル環境において利用 Augmented Surfaces (by Sony CSL)

まとめ：インタフェースの歴史 • 0次元→1→2→2.5次元へと進歩 • システムの習得しやすさは改善された • 一方，ユーザの生産力はあまり変わらない • 新しい技術の登場＋古い技術の再利用

おまけ: インタラクション技法の再利用例 • バッチファイル • コマンド言語による一連の作業を自動化 • コマンドラインのターミナル • Unix系コンソール，コマンドプロンプトなど • ダイアログボックス，Webフォーム • プッシュフォンのインタフェース • 質疑応答＋メニュー

ひとくぎり • 質問などがあればどうぞ！ふー

CUIとGUI • CUI (Character User Interface) • ライン指向，全画面インタフェース • コマンド言語，質疑応答，メニュー，ファンクションキー • （間接操作） • GUI (Graphical User Interface) • WIMPに基づくインタフェース • ウインドウ，アイコン，メニュー，ポインティングデバイス • 直接操作

コマンド言語とコマンド名のつけ方 • コマンド名と引数（パラメーター）を用いる． • ex.) copy A B delete A • コマンド名のつけ方 • 意味のある名前を選ぶ． • 特定性と一般性に配慮 • 特定的な語は記述力に富む • ex.) doskey, ipconfigなど • 一般的な語は多くの人が覚えやすい • ex.) move, copyなど

コマンド言語の長所/短所 • 長所 • 十分に習熟したあとに現れる • 効率のよい操作ができる． • ユーザの学習効果をいかせる． • システムの制御感覚を持つ． • 短所 • 学習過程におこる • 操作が分かりにくい • 操作を間違えやすい • 操作の習得に時間がかかる

メニューの設計 • システムが提示するコマンド群をユーザが、選択する． • 階層の設計が重要 • 階層を使わないのが一番よい（項目が少ない時） • 使う場合，深さと広がりに関するトレードオフがある． • ex.)浅いメニュー • ナビゲーションが少なくてすむ反面，各層の項目が複雑になる．　 • 選択肢の多すぎるメニュー，階層の深すぎるメニューは避ける．　　浅いメニューと深いメニュー

メニュー選択の長所/短所 • 長所 • 主に学習過程に起こる • 分かりやすい • 学習の時間が短い • キー入力が減る • 短所 • 主に熟練者に問題となる． • 操作が増える • 慣れてくるとわずらわしい • 処理時間がかかる　

直接操作 • 操作と操作対象のデータを視覚的に表示 • 連続的，可逆的な操作 • 操作結果をリアルタイムにフィードバック • WYSIWYG（What You See Is What You Get) • コマンド入力による指示と選択も併用 • ex.) • 全画面エディタ • スプレッドシート • ゲーム • GUIのファイル操作

小話: 直接操作の魔力 • GUIの計算機をどう操作するか [Nielsen 1990] • 24人に調査 • 結果 • 13人はマウスでしか操作できないと回答． • 11人はキーボードかマウスで操作すると回答 • 考察 • 直接操作部分が説得力があるため，他の操作方法を見つけにくくなっている．

アイコン • 実世界のオブジェクトのイメージを用いて，コンピュータの世界を表現 • オブジェクトの機能をメタファとして利用 • 適切な環境下では明快な表現ができる． • 視覚的な魅力を付加するさまざまなアイコン

アイコンのデザイン • 一貫性，具体性，簡潔性などが重要． • 一貫性 • 視覚的イメージは統一されているか • 具体性 • 具体的オブジェクトのように見えるか • 絵柄から意図した機能を連想できるか • 簡潔性 • すべてのオブジェクト，線分，点が必要か • 色，パターン，明るさは調和の取れた組み合わせか

アイコンの問題点 • 絵柄から機能が一意に決まらないことが多い． • アイコンのための説明が必要なケースが多い！アイコンの説明の例図書目録のアイコン

CUI vs GUI • CUIとGUIのどちらが使いやすいか？ • 一般に，GUIの方が優れたユーザビリティを持つ • CUIで実現できることはほぼGUIでも実現できる． • 逆は難しいことが多い • 一方で，GUIの制約や問題点なども明らかになりつつある．

身体障害者とGUI • 一般に，身体障害者にとっては，GUIはCUIより扱いにくい． • Ex.) • 運動機能障害のユーザー • キーボードは使えるが，マウスの細かい操作は難しい． • 視覚障害のユーザー • 画面上のアイコンやオブジェクトが見えない． • ウインドウを音声などで知らせる技術を使った研究などもあるが，効率が悪い．

ん？おまけ: ガジェット紹介 • 顔アイコン: 手軽なファイル転送システム

顔アイコン: 手軽なファイル転送システム • ファイルを顔のアイコンにドラッグ＆ドロップするだけで，手軽に送信できる． • 高林哲氏らと共同開発 (@Sony CSL) Drag and Drop

顔アイコンエディタ • 顔アイコン作成専用のシンプルなエディタを搭載 • 写真の読み込み • 顔の選択 • 背景の塗りつぶし簡単に顔アイコンを作成できる

ひとくぎり • 質問などがあればどうぞ！ふー

人に優しいインタフェース・デザイン • 現状のWIMPやGUIの問題 • ヒューメイン・インタフェース(HumaneInterface) • 人に優しいインタフェース・デザインの実現にむけて

現状のWIMPやGUIの問題点 • 単純な作業にも多くの時間がかかる． • ex.) 計算機，テキストエディタ…etc. • コンピュータの操作自体に注意が向けられ，タスクに集中できない． • 現状のGUIは，不完全な要素の集合体 • メニュー（学習は容易だが，操作に時間がかかる．） • ショートカット（素早く操作できるが，覚えにくい．）

ヒューメイン・インタフェース(HumaneInterface) • 人間の本来のタスクを阻害しない，人に優しいインタフェース • ex.) 「アイデアをメモする」 • アプリケーションの起動，ファイル名をつけるなどのタスクは本来のタスクと無関係．

ヒューメイン・インタフェースの条件 • よい習慣を形成する． • モードをもたない． • モノトナスな状態である． • 統一化されたデザインをもつ．それぞれの詳細について説明する

習慣 • 習慣の形成 • 自動化 • 注意の所在 (locus of attention)

習慣の形成とは？ • 定義: • ある作業を繰り返すことで，それが徐々にやさしいものに感じられてくる状態 • ex.)楽器の演奏，キーボードの入力 • インタフェースを継続的に利用すれば，必ず習慣が形成される． • よい習慣も悪い習慣もある．

自動化 • 定義： • 意識的に思考せずに行えるように習慣化された作業 • ex.)楽器の演奏，キーボードの入力 • 自動化を意図的に防ぐ訓練は存在しない． • ex.)ファイル削除のときの，「はい(Y)」「いいえ(N)」の確認は役に立たない． • 削除指示の直後にYを入力することが習慣化されてしまう．

インタフェース設計論　第 4 回 CUI と GUI ～人に優しいインタフェース・デザインに向けて～