Transcript PPT
第9章 ユーザインタフェース 人に優しいデザイン Copyright © the University of Tokyo 何をしたのでしょうか? 閉 <1> Copyright © the University of Tokyo この章の目的 インタフェースに関する基本概念や方法を概観する 定義と機能 使いやすさ/にくさを考えるためのモデル デザイン・評価の際に重要となる事柄や概念 <2> Copyright © the University of Tokyo この章で学ぶこと 「ユーザインタフェース」とは何を指すか? 良いユーザインタフェースを作る方法はあるのか? 良し悪しを測る方法 人間が使い易い/にくいと感じる仕組み 実際のユーザインタフェースの例 <3> Copyright © the University of Tokyo 世の中，かくも使いにくい物ばかり？ ドアを押すのか引くのかわからない 電灯とスイッチの位置が無関係 携帯電話の機種によって使い方が違う ワープロが勝手に入力を変更する これらの問題は 人工物と人間の境界・接点=「インタフェース」 で起こっている <4> Copyright © the University of Tokyo 設計者とユーザの齟齬 券売機 コイン投入口にコイン詰まりを 防ぐための棒がある 「500円玉は右に入れるので すか，左に入れるのですか？」 インタフェース設計者の工夫が，予期せぬ形でユーザに解 釈される インタフェースが設計者や人工物とユーザとを結ぶ唯一の 接点となっているために生じる <5> Copyright © the University of Tokyo 設計者とユーザの齟齬 券売機 コイン投入口にコイン詰まりを防ぐための棒がある 「500円玉は右に入れるのですか，左に入れるのですか？」 インタフェース設計者の工夫が，予期せぬ形でユーザに解 釈される インタフェースが設計者や人工物とユーザとを結ぶ唯一の 接点となっているために生じる <6> Copyright © the University of Tokyo インタフェースの定義 2つの異なる存在の境界面 水と油のように異なる物質の間 コンピュータの複数のハードウェア間や ソフトウェア間 この章で扱うインタフェース コンピュータなど人工物とユーザ（人間）との間 「ユーザインタフェース」，あるいは「ヒューマンインタ フェース」と呼ばれる <7> Copyright © the University of Tokyo インタフェースの機能 ユーザはインタフェースを通して人工物を操作する → 人工物が機能を最大限に発揮するためには， 使いやすいインタフェースが必要 ドライバのインタフェース = 握り 人間は握りを通してドライバを操作する ドライバが機能を最大限に発揮するためには， 使いやすい握りが必要 <8> Copyright © the University of Tokyo コンピュータのインタフェース ドライバ（古典的な道具）のインタフェース 固いネジには握りの太いドライバ，細いネジや折れやすいネ ジには握りの細いドライバ 人間の道具（ドライバ）への働きかけは，そのまま対象（ネジ） への働きかけとなっている コンピュータのインタフェース 道具への働きかけが対象への働きかけと等価であるとは限ら ない 例：エンターキーを押す • 目的は力の伝達ではなく，情報（意思決定）の伝達 • 伝達対象は状況によって変わる（かな漢字変換，ミサイルの発 射命令など） <9> Copyright © the University of Tokyo コンピュータのインタフェースの特徴 道具 インタ フェース 道具への 働きかけ コンピュータ キーボード・マウス・ウインド 握り ウシステム・・・ キーを押す、マウスを動か 回す す、・・・ メールを送る・変換を確定す 対象への ネジを締め る・ウインドウを閉じる・入力 働きかけ る・緩める を取り消す・・・ ドライバ 道具への働きかけと対象への働きかけが 1対1に対応しているかどうか <10> Copyright © the University of Tokyo インタフェースの二重接面性 第一接面（操作インタフェース） ユーザ（心理的世界）と人工物（道具・機械の世界）の間 直接的 第二接面（制御インタフェース） 人工物と物理的なタスク（仕事世界）の間 間接的 ユーザの目的は物理的なタスクの実行であるが，操作可能 なのは第一接面 コンピュータなど，高度な人工物には二重接面性が 存在する <11> Copyright © the University of Tokyo インタフェースの二重接面性（図） 道 具 ・ 機 心理的 世界 エンターキーを 押す 仕事世界 械 の 世 界 第 一 接 面 <12> 第 二 接 面 かな漢字変換を する Copyright © the University of Tokyo インタフェースの二重接面性 道具への働きかけと対象への働きかけが 1対1でないこと ← インタフェースの二重接面性によって説明 目的: 仕事世界における作業 できる操作: 第一接面 心 理 的 世 界 <13> 第 一 接 面 道 具 ・ 機 械 の 世 界 第 二 接 面 仕 事 世 界 Copyright © the University of Tokyo コンピュータの汎用性による難しさ 道具・物理世界から仕事世界への対応づけは多様 ワープロソフトによる文書作成 データベースソフトによるデータの管理 数値計算プログラムによる建物の構造計算 心理的世界から道具・物理世界への対応づけは 限られている キーボード，ポインティング・デバイス，GUI 逆向きの対応づけも同様 コンピュータとソフトウェアの状態や実行結果は多様 ユーザに提供される出力は限られている <14> Copyright © the University of Tokyo 二重接面性と汎用性 文字の コピー 保存 発射 送信 削除 第 一 接 面 第 二 接 面 ワードプ ロセッサ 電子 メール 検索 限 ら れ た 装 置 心 理 的 世 界 <15> 道 具 ・ 機 械 の 世 界 ゲーム 仕事世界 Copyright © the University of Tokyo 実行の淵と評価の淵 ユーザが乗り越える必要のある2つの淵 実行の淵 ユーザの心理的世界に属する目的や意図を，物理 操作に変換して，物理的世界に働きかける 例：かな漢字変換 → エンターキー 評価の淵 物理的世界に現れた状態や変化を認識して，自らの 操作を心理的世界において解釈，評価する 例：ゴミ箱 → 削除 <16> Copyright © the University of Tokyo ユーザ行為の7段階モデル (D. A. Norman) 実行の淵を乗り越える段階 1) 目標の設定 2) 意図の形成 3) 目標や意図を実現する行動（入力）の選択 4) 行動の実行 評価の淵を乗り越える段階 5) システムの状態の知覚 6) その解釈 7) システムの状態とユーザの目標との比較評価 <17> Copyright © the University of Tokyo ユーザ行為の7段階モデル（図） <18> Copyright © the University of Tokyo ユーザ行為の7段階モデル（図） 3 4 入力選択 入力装置から 入力実行 2 意図 1 実行の淵 システムの 物理的状態 物理的世界 6 5 ディスプレイ の知覚 <19> 解釈 7 ユーザの 目標 心理的世界 評価の淵 評価 Copyright © the University of Tokyo ユーザ行為の7段階モデル (ノーマン) 1.目標 心 理 的 世 界 第 一 7. 評価接 面 6. 解釈 5. 知覚 限 ら 2. 意図 3. 入力 れ 選択 4. 実行 た 装 置 <20> 第 二 接 面 ワードプ ロセッサ 電子 メール 道 具 ・ 機 械 の 世 界 ゲーム 仕事世界 Copyright © the University of Tokyo 行為の７段階理論 1. ゴール 「何か食べよう」「身支度をしよう」「テレビでも見ようか」といった はっきりとは、特定されていないもののこと。 2. 意図 ゴールを達成するための特定の行為「冷凍庫のシーフードドリア を解凍して食べる」 3. 4. 行為系列 実行 何が起こったかのチェックの３段階 1. 外界に何が起こったかを知覚する 2. その意味を解釈する 3. 欲していたものと実際の結果を比較する <21> Copyright © the University of Tokyo ゴール ゴールを達成するため に何をするかの意図 起こると思っていたことと比 較して解釈を評価する 予期にもとづいて知覚 を解釈する 実際に実行する 行為系列の計画 行為系列を実行する 外界の状態の知覚 外界 <22> Copyright © the University of Tokyo デザインの手助けとしての行為の７段階理論 装置の機能をみきわめることができるか？ どんな操作をする ことができるか知る ことができるか？ 問題となっているシス テムが期待通りの状 態にあると言えるか？ 意図を実際の行為 の系列に対応づけ られるか？ システムの状態と解 釈の間の対応付け が分かるか？ その行為が実行できるか？ <23> システムがどんな状態 にあるか分かるか？ Copyright © the University of Tokyo インタフェースの3つの概念モデル ユーザモデル ユーザが持つ，システムに対 するメンタルモデル デザインモデル システム設計者が持つ，システ ムの基本的なデザイン方針や プラン システムイメージ システムが実際にユーザに提 示するイメージ <24> Copyright © the University of Tokyo インタフェースの3つの概念モデル ユーザモデル ユーザが持つ，システムに対するメンタルモデル デザインモデル システム設計者が持つ，システムの基本的なデザイ ン方針やプラン システムイメージ システムが実際にユーザに提示するイメージ <25> Copyright © the University of Tokyo インタフェースの3つの概念モデル（続き） モデル間の関係 デザインモデルからシステムイメージには一方向 ユーザモデルとシステムイメージの間は双方向 デザインモデルとユーザモデルの間にはない インタフェースデザインの2つの側面 技術的側面 • デザインモデルをシステムイメージに反映する ユーザの認知・行動的側面 • ユーザモデルを予測してデザインモデルを作る <26> Copyright © the University of Tokyo インタフェースの3つの概念モデル 1つのものに 対して3つの モデルが ある 一方向・ 両方向の関係 良くするには： システムの基本的な デザイン方針やプラン システムに対する メンタルモデル デザインを 忠実にシステムに 反映 実際にユーザに 提示するイメージ ユーザモデルの 予測 <27> Copyright © the University of Tokyo 入出力デバイス 入力デバイス コンピュータにデータや文字を入 力する 出力デバイス コンピュータの処理結果や状態を 表示する ユーザの心理的世界とコンピュー タの物理的世界との相互作用は， 入出力デバイスとその上での表 現を通して行われる <28> Copyright © the University of Tokyo 入出力デバイス 入力デバイス コンピュータにデータや文字を入力する 出力デバイス コンピュータの処理結果や状態を表示する ユーザの心理的世界とコンピュータの物理的世界 との相互作用は，入出力デバイスとその上での表 現を通して行われる <29> Copyright © the University of Tokyo 入出力デバイス 文字の コピー 保存 送信 削除 第 一 接 面 第 二 接 面 ワードプ ロセッサ 電子 メール 発射 検索 入力デバイス キーボード, ライトペン, 心タッチスクリーン, デジタイ 理ザ, マウス, トラックボール, 的 世ジョイスティック, マイク， 界OCR機器，バーコードリー ダ <30> 限 出力デバイス 道 ら 具 れディスプレイ，プリンタ，ス ゲーム ・ 機 たピーカなど 械 装GUI / CUI の 置 世 仕事世界 界 Copyright © the University of Tokyo 入力デバイス キーボード ポインティング・デバイス 2次元的な位置情報を入力するデバイス 直接入力型デバイス • ライトペン，タッチスクリーン 間接入力型デバイス • デジタイザ，マウス，トラックボール，ジョイスティック その他 マイク，OCR機器，バーコードリーダ <31> Copyright © the University of Tokyo 出力デバイス ディスプレイ，プリンタ，スピーカなど GUI (Graphical User Interface) 情報の表示にウィンドウやアイコンなどのグラフィカ ルなオブジェクトを多用 ポインティング・デバイスでオブジェクトを操作するこ とで基本操作の多くを実現する CUI (Character User Interface) 情報の表示を文字によって行う すべての操作をキーボードで行う <32> Copyright © the University of Tokyo GUI (Graphical User Interface) <33> Copyright © the University of Tokyo GUIとCUIの比較 GUI CUI 操作情報の 絵や画像も用いて視 提示 覚的に情報を表示す る． キーボードから命令を 文字で入力，文字列 で結果を出力する． 特徴 慣れれば，作業は迅 速． 構成要素と 操作 直感的で，わかりやす い． ウィンドウ(window)， アイコン(icon)， メニュー(menu)， マウス(mouse)など を用いた直接操作． <34> プロンプトに続いて， 文字列による命令を 与える． Copyright © the University of Tokyo GUIの歴史 ライトペンやビットマップディスプレイの実用化 （1960年代）とともに構想されるようになる アラン・ケイによるダイナブック構想（1968年）と Altoの開発 マッキントッシュへの採用 Windows, X window system（UNIX系） の開発 <35> Copyright © the University of Tokyo GUIの特徴 デスクトップメタファ 机上（デスクトップ）に書類を広げる感覚での操作 直接操作の考え方 アフォーダンス（下界の環境や事物が，生体の活動に供する べくもっている情報）の概念を拡張 その装置あるいは表示を見れば，どのように実行可能か即座 にわかる WIMPシステム ウィンドウ(W)，アイコン(I)，メニュー(M)，（マウス）ポインタ(P)を 主な要素として構成 （マルチ）ウィンドウシステムによって実現 <36> Copyright © the University of Tokyo インタフェースの2つの側面 物理的側面 入出力デバイスの物理的特性とユーザの感覚運動 系の特性の適合 キーボードでは，押したときの感触やキーストローク 認知的側面 ディスプレイに表示されるメニュー項目の構成やメッ セージの内容 ユーザが内容を理解や記憶しやすいかが問題 <37> Copyright © the University of Tokyo 情報処理特性モデル (S. K. Card) 人間の感覚運動系に適合したモデルの代表格 ユーザが入出力デバイスを用いる際に示す行動を 定量的に予測可能にした 認知科学における情報処理アプローチを代表する 成果の1つ <38> Copyright © the University of Tokyo 情報処理特性モデルの内容 3つの系による構成 知覚システムによる入力情報の認識と処理 認知システムによる意味的な処理 （必要な場合）運動システムによる出力 各システムはプロセッサとメモリにより構成 プロセッサのパラメータはサイクルタイムτ • 各プロセッサで行う処理の最小単位 メモリのパラメータ • 蓄積容量μ • 減衰時間δ：50%までの減衰時間 • コードタイプκ：記憶の符号化のタイプ <39> Copyright © the University of Tokyo 反応の時間予測 単純な反応には各プロセッサのτを加算すればよい 複雑な操作には関連する心理学法則を組み込む 名前の照合の時間予測 知覚プロセッサ：文字の知覚 → τp 認知プロセッサ：文字認識，長期記憶に蓄えられた 特定の文字のマッチング，反応の決定 → 3τc 運動プロセッサ：出力の生成 → τm 反応時間の予測値 = τp + 3τc + τm <40> Copyright © the University of Tokyo 視覚への入力は自動的に解釈される ベティエドワード 元の絵 逆さの絵を模写 普通の向きの 絵を模写 http://homepage3.nifty.com/art-of-life/workshop/rmode.htm#%8F%E3%89%BA <41> Copyright © the University of Tokyo 認知的インタフェース デザインモデルとユーザモデルの齟齬を解消する ことが目的 2つのアプローチ デザインモデルに近いユーザモデルをユーザが獲 得できるようなインタフェースをデザインする → 人が学習可能なインタフェース システム設計者がユーザモデルを熟知した上でデザ インモデルを構築する → 適応的インタフェース <42> Copyright © the University of Tokyo 人が学習可能なインタフェース 適切なユーザモデルの獲得による効果 インタフェースに関する学習の高速化 トラブルへの適切な対処 ショートカットなどの自発的な発見 <43> Copyright © the University of Tokyo 課題分割プラン 問題は下位課題に分割することで解決可能である という考え方 ビデオの予約録画の下位課題：開始時間の設定， 終了時間の設定，チャンネルの設定，録画モードの 設定など 機械を利用する能力に直結する システム設計者にはきわめて一般的 実験的な検証 課題分割の考え方をツリー図によって支援する インタフェースは，機械操作に慣れていないユーザ に有効 <44> Copyright © the University of Tokyo 適応的インタフェース ユーザのシステムへの習熟により，ユーザモデル は変化する → そのときどきのユーザモデルをシステムが推定し， ふさわしい表示を行う POBox 数少ない成功例 かな漢字変換における 予測とあいまい検索を 用いたインタフェース 携帯電話などの入力に 用いられている <45> Copyright © the University of Tokyo 適応的インタフェース ユーザのシステムへの習熟により，ユーザモデル は変化する → そのときどきのユーザモデルをシステムが推定し， ふさわしい表示を行う POBox 数少ない成功例 かな漢字変換における予測とあいまい検索を用いた インタフェース 携帯電話などの入力に用いられている <46> Copyright © the University of Tokyo ユーザビリティの評価 パフォーマンステスト システムの動作情報とユーザの操作履歴から評価 ガイドライン法 既定の使いやすさのガイドラインを満たしているかどうかを 評価 モデル法 ユーザがシステムを利用する際の行動を行動モデルに即して 評価 インスペクション法 複数の専門家による画面例やモックアップから使い方を想定 して問題点を見つける <47> Copyright © the University of Tokyo まとめ インタフェースはシステム設計者とユーザとがコミュ ニケーションをもてる唯一の場である システムのユーザビリティの大部分はインタフェー スのユーザビリティによって左右される インタフェースの構成には，ユーザの感覚運動およ び認知の行動特性を考慮することが重要 <48> Copyright © the University of Tokyo たくさんのスイッチとディスプレイとマニュアル 利用者は、したいことの１つか２つだけ覚えている だけですます そのまま売れ続けるので、デザイナーはやり方を 変える必要を考えない。 アフォーダンス 使用の仕方を示唆する事物の特徴 引き手、横バー ドアのアフォーダンス 毎日使う道具は２万個もある <49> Copyright © the University of Tokyo デザインモデル デザイナーが持つ概念モデ ル システムイメージ 目に見える構造の部分 ユーザの持つ概念モデル システムのマニュアル、実際の利用などから 生ずる（テキストp.217図9.4=ノーマン p.25図1-10) デザイナはシステムイメージを通してのみ ユーザに語りかけられる <50> Copyright © the University of Tokyo 良いデザインの原則 1. 可視性 目で見て、装置の状態とどんな機能をもつかが わかること。 2. よい概念モデル デザイナーはユーザにとってのよい概 念モデルを提供すること。捜査と結果の表現に整合性が あり、一貫的整合的なシステムイメージを生むこと。 3. 良い対応付け 行為と結果、操作と結果、システムの状 態と目に見えるものの間の対応関係を確立すること。 4. フィードバック どのような行為が実際に実行され、どの ような結果が得られたかに関する完全な情報をユーザが 受け取る。 <51> Copyright © the University of Tokyo コンピュータの悪いデザインのタイプ 1. 対象となるものを見えなくする。つまり次に どんな操作をしたらよいかを教えるヒントを なくす。 2. 恣意的にする。意図した行為を実行させる ための手続きとの対応付けを勝手気ままに する。 3. 一貫性をなくす ルを適用する。 各モードごとに違うルー <52> Copyright © the University of Tokyo 「誰のためのデザイン」D.A.ノーマン、新曜社 この本は毎日使う道具の心理学(Psychology of Everyday Things) 毎日使う道具の精神病理学 スイングドア 引くべきか押すべきか デザインの重要な原則 可視性 見れば分かる 自然なデザイン自然な解釈 例 新しい電話機 保留のボタン、点滅ライトがない。目的の 機能にたどりつけない。 ビデオ、洗濯乾燥機などの家電製品がコントロールのための 制御スイッチの山になっている。 <53> Copyright © the University of Tokyo 技術の逆説 技術の進歩が使い方の複雑さに関し てはＵ字型を描くように見える 素朴なメンタルモデルの齟齬 室温調節器（サーモスタット）、プレート電熱版（サー モスタット）設定値を高くすると熱量が大きくなり、 早く熱くなると思う人がいる。 サーモスタットは単なるオンオフスイッチで上のよう なことは起こらない <54> Copyright © the University of Tokyo システムイメージが整合的でないと、ユーザが間違ったメン タルモデルを持つことになる 例 新しい電話 「もしもし、どなたですか？」「そちらこそだ れですか。電話をかけてきたのはあなたでしょう？」 可視性のなさと貧弱な概念モデルのため 例 新しい自動車 112個のスイッチ 電話より使いやすい 見れば分かる スイッチとコントロールされるもののあいだ の自然で良い対応付けがある コントロール手段とその表示が自然な対応付けができてい るとき、道具は使いやすくなる <55> Copyright © the University of Tokyo 日常の道具に関する失敗は自分自身を責める傾向にある。 一般には逆に、人は自分に問題があれば、周りの状況、環 境に原因を求め、他人に問題があるときは、その人本人の 性格に原因を求めようとする。 それ自体なんでもないことと思われる場面で何回か失敗す ると、道具を使うことや数学の問題すべてに一般化してしま う。いったん失敗すると自分を責めることによって数学一般 にすぐ一般化してしまうのが問題なのである。 何かで失敗する。自分のせいだと思う。自分にはできないと 思いこむようになる。 例 マイアミ発ナッソー行きの飛行機 ３つあるエンジンのう ち１つのオイル圧が低下し、残り２つも低下してしまった。「３ つのエンジンのオイルが同時に切れる可能性なんて１００万 回に１回のことだ」と考えて、計器を無視してパイロットは飛 行を続けた。３つのエンジンが止まってしまい、海面に不時 着直前に第１エンジンが再始動して、マイアミに無事着陸で きた。滑走路のはしについたところでエンジンは停止した。 <56> Copyright © the University of Tokyo 多くの日常的課題で、ゴールや意図は余り具体的 に特定されない。 計画的にではなく。毎日の活動の最中にちょうど良 い機会がきたときにそれを行うことが多い。 どの段階からでも始められるし、人間が常に論理 的で理性的であるとは限らない。 <57> Copyright © the University of Tokyo 日常場面における行為の心理学 例 ある計算機の評価 リターンキー、とエンターキーがある。 しばしば間違えて、作業結果が失われる 他の秘書たちは、エラーをしたのは自分のせいで あるという罪悪感を持って、エラーを報告しなかっ た。自分の不注意さを責める傾向にある。 悪いのはデザインであって、誰でも同じようにエ ラーを起こす <58> Copyright © the University of Tokyo