第9章 ユーザインタフェース 人に優しいデザイン

何をしたのでしょうか? 閉 Enter 増原先生

この章の目的 インタフェースに関する基本概念や方法を概観する 定義と機能 使いやすさ/にくさを考えるためのモデル デザイン・評価の際に重要となる事柄や概念

この章で学ぶこと 「ユーザインタフェース」とは何を指すか? 良いユーザインタフェースを作る方法はあるのか? 実際のユーザインタフェースの例 良し悪しを測る方法 人間が使い易い/にくいと感じる仕組み 実際のユーザインタフェースの例 増原先生のスライドのタイトルを変更

世の中，かくも使いにくい物ばかり？ ドアを押すのか引くのかわからない 電灯とスイッチの位置が無関係 携帯電話の機種によって使い方が違う ワープロが勝手に入力を変更する これらの問題は 人工物と人間の境界・接点=「インタフェース」 で起こっている 増原先生のスライドを参考に下部を追加

設計者とユーザの齟齬 券売機 インタフェース設計者の工夫が，予期せぬ形でユーザに解釈される コイン投入口にコイン詰まりを 防ぐための棒がある 「500円玉は右に入れるので すか，左に入れるのですか？」 インタフェース設計者の工夫が，予期せぬ形でユーザに解釈される インタフェースが設計者や人工物とユーザとを結ぶ唯一の接点となっているために生じる

設計者とユーザの齟齬 券売機 インタフェース設計者の工夫が，予期せぬ形でユーザに解釈される コイン投入口にコイン詰まりを防ぐための棒がある 「500円玉は右に入れるのですか，左に入れるのですか？」 インタフェース設計者の工夫が，予期せぬ形でユーザに解釈される インタフェースが設計者や人工物とユーザとを結ぶ唯一の接点となっているために生じる 画像なし版

インタフェースの定義 2つの異なる存在の境界面 この章で扱うインタフェース 水と油のように異なる物質の間 コンピュータの複数のハードウェア間や ソフトウェア間 この章で扱うインタフェース コンピュータなど人工物とユーザ（人間）との間 「ユーザインタフェース」，あるいは「ヒューマンインタフェース」と呼ばれる

インタフェースの機能 ユーザはインタフェースを通して人工物を操作する → 人工物が機能を最大限に発揮するためには， 使いやすいインタフェースが必要 ドライバのインタフェース = 握り 人間は握りを通してドライバを操作する ドライバが機能を最大限に発揮するためには， 使いやすい握りが必要 増原先生のスライドに置き換え

コンピュータのインタフェース ドライバ（古典的な道具）のインタフェース コンピュータのインタフェース 固いネジには握りの太いドライバ，細いネジや折れやすいネジには握りの細いドライバ 人間の道具（ドライバ）への働きかけは，そのまま対象（ネジ）への働きかけとなっている コンピュータのインタフェース 道具への働きかけが対象への働きかけと等価であるとは限らない 例：エンターキーを押す 目的は力の伝達ではなく，情報（意思決定）の伝達 伝達対象は状況によって変わる（かな漢字変換，ミサイルの発射命令など） 2ページを統合

キーボード・マウス・ウインドウシステム・・・ メールを送る・変換を確定する・ウインドウを閉じる・入力を取り消す・・・ コンピュータのインタフェースの特徴 道具 ドライバ コンピュータ インタフェース 握り キーボード・マウス・ウインドウシステム・・・ 道具への働きかけ 回す キーを押す、マウスを動かす、・・・ 対象への働きかけ ネジを締める・緩める メールを送る・変換を確定する・ウインドウを閉じる・入力を取り消す・・・ 増原先生 道具への働きかけと対象への働きかけが 1対1に対応しているかどうか

インタフェースの二重接面性 第一接面（操作インタフェース） 第二接面（制御インタフェース） ユーザ（心理的世界）と人工物（道具・機械の世界）の間 直接的 第二接面（制御インタフェース） 人工物と物理的なタスク（仕事世界）の間 間接的 ユーザの目的は物理的なタスクの実行であるが，操作可能なのは第一接面 コンピュータなど，高度な人工物には二重接面性が 存在する

インタフェースの二重接面性（図） かな漢字変換をする エンターキーを押す 道具・機械の世界 心理的世界 仕事世界 第一接面 第二接面 山口和紀先生9ページから具体例をとりこみ 第一接面 第二接面 かな漢字変換をする エンターキーを押す

インタフェースの二重接面性 道具への働きかけと対象への働きかけが 1対1でないこと ← インタフェースの二重接面性によって説明 目的: 仕事世界における作業 できる操作: 第一接面 道具・機械の世界 心理的世界 仕事世界 第一接面 第二接面 増原先生

コンピュータの汎用性による難しさ 道具・物理世界から仕事世界への対応づけは多様 心理的世界から道具・物理世界への対応づけは 限られている ワープロソフトによる文書作成 データベースソフトによるデータの管理 数値計算プログラムによる建物の構造計算 心理的世界から道具・物理世界への対応づけは 限られている キーボード，ポインティング・デバイス，GUI 逆向きの対応づけも同様 コンピュータとソフトウェアの状態や実行結果は多様 ユーザに提供される出力は限られている

二重接面性と汎用性 文字の 送信 コピー 第一接面 第二接面 ワードプロセッサ 限られた装置 削除 保存 道具・機械の世界 電子 メール 心理的世界 発射 検索 ゲーム 増原先生 仕事世界

実行の淵と評価の淵 ユーザが乗り越える必要のある2つの淵 実行の淵 評価の淵 ユーザの心理的世界に属する目的や意図を，物理操作に変換して，物理的世界に働きかける 例：かな漢字変換 → エンターキー 評価の淵 物理的世界に現れた状態や変化を認識して，自らの操作を心理的世界において解釈，評価する 例：ゴミ箱 → 削除 山口和紀先生のスライドより例を追加

ユーザ行為の7段階モデル (D. A. Norman) 実行の淵を乗り越える段階 1) 目標の設定 2) 意図の形成 3) 目標や意図を実現する行動（入力）の選択 4) 行動の実行 評価の淵を乗り越える段階 5) システムの状態の知覚 6) その解釈 7) システムの状態とユーザの目標との比較評価

ユーザ行為の7段階モデル（図） 図は中谷先生のスライドより

ユーザ行為の7段階モデル（図） 心理的世界 物理的世界 3 4 入力選択 2 入力装置から入力実行 意図 1 実行の淵 6 ユーザの目標 システムの物理的状態 解釈 7 5 心理的世界 ディスプレイの知覚 物理的世界 評価 2006年版にテキストボックスを追加，中谷先生版とこれのどちらかを残す 評価の淵

ユーザ行為の7段階モデル (ノーマン) 第一接面 第二接面 ワードプロセッサ 7. 評価 限られた装置 6. 解釈 1.目標 道具・機械の世界 第一接面 第二接面 ワードプロセッサ 7. 評価 6. 解釈 1.目標 5. 知覚 電子 メール 心理的世界 2. 意図 3. 入力 選択 ゲーム 増原先生 4. 実行 仕事世界

行為の７段階理論 ゴール 意図 行為系列 実行 何が起こったかのチェックの３段階 「何か食べよう」「身支度をしよう」「テレビでも見ようか」といったはっきりとは、特定されていないもののこと。 意図 ゴールを達成するための特定の行為「冷凍庫のシーフードドリアを解凍して食べる」 行為系列 実行 何が起こったかのチェックの３段階 外界に何が起こったかを知覚する その意味を解釈する 欲していたものと実際の結果を比較する 中村先生のスライドを改変

起こると思っていたことと比較して解釈を評価する ゴール ゴールを達成するために何をするかの意図 起こると思っていたことと比較して解釈を評価する 予期にもとづいて知覚を解釈する 実際に実行する行為系列の計画 行為系列を実行する 外界の状態の知覚 中村先生 外界

デザインの手助けとしての行為の７段階理論 どんな操作をすることができるか知ることができるか？ 装置の機能をみきわめることができるか？ どんな操作をすることができるか知ることができるか？ 問題となっているシステムが期待通りの状態にあると言えるか？ システムの状態と解釈の間の対応付けが分かるか？ 意図を実際の行為の系列に対応づけられるか？ 中村先生 システムがどんな状態にあるか分かるか？ その行為が実行できるか？

インタフェースの3つの概念モデル ユーザモデル デザインモデル システムイメージ ユーザが持つ，システムに対するメンタルモデル システム設計者が持つ，システムの基本的なデザイン方針やプラン システムイメージ システムが実際にユーザに提示するイメージ

インタフェースの3つの概念モデル ユーザモデル デザインモデル システムイメージ ユーザが持つ，システムに対するメンタルモデル システム設計者が持つ，システムの基本的なデザイン方針やプラン システムイメージ システムが実際にユーザに提示するイメージ 画像なし版

インタフェースの3つの概念モデル（続き） モデル間の関係 インタフェースデザインの2つの側面 デザインモデルからシステムイメージには一方向 ユーザモデルとシステムイメージの間は双方向 デザインモデルとユーザモデルの間にはない インタフェースデザインの2つの側面 技術的側面 デザインモデルをシステムイメージに反映する ユーザの認知・行動的側面 ユーザモデルを予測してデザインモデルを作る

インタフェースの3つの概念モデル システムの基本的なデザイン方針やプラン 1つのものに 対して3つの モデルが ある 一方向・ 両方向の関係 良くするには： デザインを 忠実にシステムに 反映 ユーザモデルの 予測 システムに対するメンタルモデル 実際にユーザに提示するイメージ 増原先生

入出力デバイス 入力デバイス コンピュータにデータや文字を入力する 出力デバイス コンピュータの処理結果や状態を表示する ユーザの心理的世界とコンピュータの物理的世界との相互作用は，入出力デバイスとその上での表現を通して行われる

入出力デバイス 入力デバイス コンピュータにデータや文字を入力する 出力デバイス コンピュータの処理結果や状態を表示する ユーザの心理的世界とコンピュータの物理的世界との相互作用は，入出力デバイスとその上での表現を通して行われる 画像なし版

入出力デバイス 限られた装置 文字の コピー 送信 道具・機械の世界 第一接面 第二接面 ワードプロセッサ 削除 保存 電子 メール 心理的世界 発射 検索 入力デバイス キーボード, ライトペン, タッチスクリーン, デジタイザ, マウス, トラックボール,ジョイスティック, マイク，OCR機器，バーコードリーダ 出力デバイス ディスプレイ，プリンタ，スピーカなど GUI / CUI ゲーム 増原先生 仕事世界

入力デバイス キーボード ポインティング・デバイス その他 2次元的な位置情報を入力するデバイス 直接入力型デバイス 間接入力型デバイス ライトペン，タッチスクリーン 間接入力型デバイス デジタイザ，マウス，トラックボール，ジョイスティック その他 マイク，OCR機器，バーコードリーダ

出力デバイス ディスプレイ，プリンタ，スピーカなど GUI (Graphical User Interface) 情報の表示にウィンドウやアイコンなどのグラフィカルなオブジェクトを多用 ポインティング・デバイスでオブジェクトを操作することで基本操作の多くを実現する CUI (Character User Interface) 情報の表示を文字によって行う すべての操作をキーボードで行う

GUI (Graphical User Interface) 美馬先生8ページを画像として取り込みました．背景も一緒にとりこんだため，ずれがあります．

GUIとCUIの比較 GUI CUI 操作情報の提示 絵や画像も用いて視覚的に情報を表示する． キーボードから命令を文字で入力，文字列で結果を出力する． 特徴 直感的で，わかりやすい． 慣れれば，作業は迅速． 構成要素と操作 ウィンドウ(window)，アイコン(icon)，　　　メニュー(menu)，　 マウス(mouse)などを用いた直接操作． プロンプトに続いて，文字列による命令を与える．

GUIの歴史 ライトペンやビットマップディスプレイの実用化（1960年代）とともに構想されるようになる アラン・ケイによるダイナブック構想（1968年）と Altoの開発 マッキントッシュへの採用 Windows, X window system（UNIX系）の開発

GUIの特徴 デスクトップメタファ 直接操作の考え方 WIMPシステム 机上（デスクトップ）に書類を広げる感覚での操作 アフォーダンス（下界の環境や事物が，生体の活動に供するべくもっている情報）の概念を拡張 その装置あるいは表示を見れば，どのように実行可能か即座にわかる WIMPシステム ウィンドウ(W)，アイコン(I)，メニュー(M)，（マウス）ポインタ(P)を主な要素として構成 （マルチ）ウィンドウシステムによって実現 山口和紀先生20ページを参考に修正

インタフェースの2つの側面 物理的側面 認知的側面 入出力デバイスの物理的特性とユーザの感覚運動系の特性の適合 キーボードでは，押したときの感触やキーストローク 認知的側面 ディスプレイに表示されるメニュー項目の構成やメッセージの内容 ユーザが内容を理解や記憶しやすいかが問題

情報処理特性モデル (S. K. Card) 人間の感覚運動系に適合したモデルの代表格 ユーザが入出力デバイスを用いる際に示す行動を定量的に予測可能にした 認知科学における情報処理アプローチを代表する成果の1つ

情報処理特性モデルの内容 3つの系による構成 各システムはプロセッサとメモリにより構成 知覚システムによる入力情報の認識と処理 認知システムによる意味的な処理 （必要な場合）運動システムによる出力 各システムはプロセッサとメモリにより構成 プロセッサのパラメータはサイクルタイムτ 各プロセッサで行う処理の最小単位 メモリのパラメータ 蓄積容量μ 減衰時間δ：50%までの減衰時間 コードタイプκ：記憶の符号化のタイプ 山口和紀先生版を参考に修正

反応の時間予測 単純な反応には各プロセッサのτを加算すればよい 複雑な操作には関連する心理学法則を組み込む 名前の照合の時間予測 知覚プロセッサ：文字の知覚 → τp 認知プロセッサ：文字認識，長期記憶に蓄えられた特定の文字のマッチング，反応の決定 → 3τc 運動プロセッサ：出力の生成 → τm 反応時間の予測値 = τp + 3τc + τm 山口和紀先生版を参考に最後の行を追加

視覚への入力は自動的に解釈される ベティエドワード 普通の向きの絵を模写 元の絵 逆さの絵を模写 山口和紀先生 普通の向きの絵を模写 元の絵 逆さの絵を模写 http://homepage3.nifty.com/art-of-life/workshop/rmode.htm#%8F%E3%89%BA

認知的インタフェース デザインモデルとユーザモデルの齟齬を解消することが目的 2つのアプローチ デザインモデルに近いユーザモデルをユーザが獲得できるようなインタフェースをデザインする → 人が学習可能なインタフェース システム設計者がユーザモデルを熟知した上でデザインモデルを構築する → 適応的インタフェース

人が学習可能なインタフェース 適切なユーザモデルの獲得による効果 インタフェースに関する学習の高速化 トラブルへの適切な対処 ショートカットなどの自発的な発見

課題分割プラン 問題は下位課題に分割することで解決可能であるという考え方 機械を利用する能力に直結する システム設計者にはきわめて一般的 ビデオの予約録画の下位課題：開始時間の設定，終了時間の設定，チャンネルの設定，録画モードの設定など 機械を利用する能力に直結する システム設計者にはきわめて一般的 実験的な検証 課題分割の考え方をツリー図によって支援する　　　インタフェースは，機械操作に慣れていないユーザに有効

適応的インタフェース ユーザのシステムへの習熟により，ユーザモデルは変化する → そのときどきのユーザモデルをシステムが推定し，ふさわしい表示を行う POBox 数少ない成功例 かな漢字変換における 　　予測とあいまい検索を 　　用いたインタフェース 携帯電話などの入力に 　　用いられている

適応的インタフェース ユーザのシステムへの習熟により，ユーザモデルは変化する → そのときどきのユーザモデルをシステムが推定し，ふさわしい表示を行う POBox 数少ない成功例 かな漢字変換における予測とあいまい検索を用いたインタフェース 携帯電話などの入力に用いられている 画像なし版

ユーザビリティの評価 パフォーマンステスト ガイドライン法 モデル法 インスペクション法 システムの動作情報とユーザの操作履歴から評価 既定の使いやすさのガイドラインを満たしているかどうかを　評価 モデル法 ユーザがシステムを利用する際の行動を行動モデルに即して評価 インスペクション法 複数の専門家による画面例やモックアップから使い方を想定して問題点を見つける

まとめ インタフェースはシステム設計者とユーザとがコミュニケーションをもてる唯一の場である システムのユーザビリティの大部分はインタフェースのユーザビリティによって左右される インタフェースの構成には，ユーザの感覚運動および認知の行動特性を考慮することが重要

たくさんのスイッチとディスプレイとマニュアル 利用者は、したいことの１つか２つだけ覚えているだけですます そのまま売れ続けるので、デザイナーはやり方を変える必要を考えない。 アフォーダンス　使用の仕方を示唆する事物の特徴 引き手、横バー　　ドアのアフォーダンス 毎日使う道具は２万個もある　 中村先生

デザインモデル デザイナーが持つ概念モデル システムイメージ 目に見える構造の部分 ユーザの持つ概念モデル デザインモデル　デザイナーが持つ概念モデル システムイメージ　目に見える構造の部分 ユーザの持つ概念モデル　 　システムのマニュアル、実際の利用などから生ずる（テキストp.217図9.4=ノーマンp.25図1-10) デザイナはシステムイメージを通してのみユーザに語りかけられる 中村先生

良いデザインの原則 可視性 目で見て、装置の状態とどんな機能をもつかがわかること。 可視性　　目で見て、装置の状態とどんな機能をもつかがわかること。 よい概念モデル　　デザイナーはユーザにとってのよい概念モデルを提供すること。捜査と結果の表現に整合性があり、一貫的整合的なシステムイメージを生むこと。 良い対応付け　　行為と結果、操作と結果、システムの状態と目に見えるものの間の対応関係を確立すること。 フィードバック　　どのような行為が実際に実行され、どのような結果が得られたかに関する完全な情報をユーザが受け取る。 中村先生

対象となるものを見えなくする。つまり次にどんな操作をしたらよいかを教えるヒントをなくす。 コンピュータの悪いデザインのタイプ 対象となるものを見えなくする。つまり次にどんな操作をしたらよいかを教えるヒントをなくす。 恣意的にする。意図した行為を実行させるための手続きとの対応付けを勝手気ままにする。 一貫性をなくす　　各モードごとに違うルールを適用する。 中村先生

「誰のためのデザイン」D.A.ノーマン、新曜社 この本は毎日使う道具の心理学(Psychology of Everyday Things) 毎日使う道具の精神病理学 スイングドア　　引くべきか押すべきか デザインの重要な原則　 　　　　可視性　　　　見れば分かる 自然なデザイン自然な解釈　　　 例　新しい電話機　保留のボタン、点滅ライトがない。目的の機能にたどりつけない。 ビデオ、洗濯乾燥機などの家電製品がコントロールのための制御スイッチの山になっている。 中村先生

技術の逆説 技術の進歩が使い方の複雑さに関してはＵ字型を描くように見える 技術の逆説　技術の進歩が使い方の複雑さに関してはＵ字型を描くように見える 素朴なメンタルモデルの齟齬 　室温調節器（サーモスタット）、プレート電熱版（サーモスタット）設定値を高くすると熱量が大きくなり、早く熱くなると思う人がいる。 　サーモスタットは単なるオンオフスイッチで上のようなことは起こらない 中村先生

システムイメージが整合的でないと、ユーザが間違ったメンタルモデルを持つことになる 例　新しい電話　「もしもし、どなたですか？」「そちらこそだれですか。電話をかけてきたのはあなたでしょう？」 可視性のなさと貧弱な概念モデルのため 例　新しい自動車　112個のスイッチ　電話より使いやすい 見れば分かる　　スイッチとコントロールされるもののあいだの自然で良い対応付けがある コントロール手段とその表示が自然な対応付けができているとき、道具は使いやすくなる 中村先生

何かで失敗する。自分のせいだと思う。自分にはできないと思いこむようになる。 日常の道具に関する失敗は自分自身を責める傾向にある。一般には逆に、人は自分に問題があれば、周りの状況、環境に原因を求め、他人に問題があるときは、その人本人の性格に原因を求めようとする。 それ自体なんでもないことと思われる場面で何回か失敗すると、道具を使うことや数学の問題すべてに一般化してしまう。いったん失敗すると自分を責めることによって数学一般にすぐ一般化してしまうのが問題なのである。 何かで失敗する。自分のせいだと思う。自分にはできないと思いこむようになる。 例　マイアミ発ナッソー行きの飛行機　３つあるエンジンのうち１つのオイル圧が低下し、残り２つも低下してしまった。「３つのエンジンのオイルが同時に切れる可能性なんて１００万回に１回のことだ」と考えて、計器を無視してパイロットは飛行を続けた。３つのエンジンが止まってしまい、海面に不時着直前に第１エンジンが再始動して、マイアミに無事着陸できた。滑走路のはしについたところでエンジンは停止した。 中村先生

多くの日常的課題で、ゴールや意図は余り具体的に特定されない。 計画的にではなく。毎日の活動の最中にちょうど良い機会がきたときにそれを行うことが多い。 どの段階からでも始められるし、人間が常に論理的で理性的であるとは限らない。 中村先生

日常場面における行為の心理学 例 ある計算機の評価 リターンキー、とエンターキーがある。 しばしば間違えて、作業結果が失われる 例　ある計算機の評価 リターンキー、とエンターキーがある。 しばしば間違えて、作業結果が失われる 他の秘書たちは、エラーをしたのは自分のせいであるという罪悪感を持って、エラーを報告しなかった。自分の不注意さを責める傾向にある。 悪いのはデザインであって、誰でも同じようにエラーを起こす 中村先生