人間とコンピュータ 2006 年度 2 学期 第 10 回

2 本日の内容 ヒューマンインタフェース ユーザインタフェース –GUI と CUI 簡単な画面デザインの例 – 善し悪しの検討

3 ヒューマンインタフェース human interface (HI) *interface はインターフェイスと書くこともあり – 人間と人間が扱う機械，道具との情報のやり とり． – 人間の特性を踏まえて（生かして），スムー ズにやりとりができるようにすることを目指 す概念 – マンマシン・インタフェースとも呼ぶ

4 ヒューマンインタフェース （ 2 ） 例えば：コンピュータを例にとると – ハードウェア：キーボードとか，マウスとか – ソフトウェア：パスワードやデータの入力画 面とか，操作ボタンとか → 人間がコンピュータと関わる「接点」が interface このインタフェースの善し悪しが道具の使い勝 手や分かりやすさに，非常に大きく影響する

5 ユーザインタフェース user interface (UI) –human interface と良く似ている（場合によっ ては同じように捉えることもある） –HI の方が広い範囲での interface を指し， UI は， コンピュータの OS やアプリケーションの画面 デザインや操作方法などの「使い勝手」， 「使用感」を指すことが多い． – 人とコンピュータや道具との接点ということ は同じ． 利用者としての人にとっての使い勝手

6 GUI と CUI コンピュータにおける CUI と GUI –CUI : Character-based User Interface 全操作をキーボードからコマンド（命令）を打ち 込んで実行することで行う interface MS-DOS が代表的 –GUI : Graphical User Interface 視覚的にわかりやすく表示されたボタンやアイコ ン，画像などをマウスなどのポインティングデバ イスで操作するより直感的な interface MacOS, Windows が代表的

7 これは CUI デザイン これは CUI デザインの代表例 try alt+enter ここにコマンドを打ち 込む

8 GUI と CUI コンピュータにおける CUI と GUI –CUI : Character-based User Interface 全操作をキーボードからコマンド（命令）を打ち 込んで実行することで行う interface MS-DOS が代表的 –GUI : Graphical User Interface 視覚的にわかりやすく表示されたボタンやアイコ ン，画像などをマウスなどのポインティングデバ イスで操作するより直感的な interface MacOS, Windows が代表的

9 GUI デザイン デザイン対象は多岐にわたる – コンピュータアプリケーション画面 – 家電製品の操作部分 – 工業製品や工場などの機械の操作部分など 操作デザインの形もさまざま – 対話式で操作するもの – 装置全体の様子を単に表示するもの – メニュー方式，検索方式など

10 GUI デザイン これも GUI デザイン

11 GUI デザイン これも GUI デザイン

12 GUI デザイン これも GUI デザイン 鉄道の券売機 タッチパネル方式 東京メトロ 荻窪 駅

13 GUI デザイン GUI の例，つづき 鉄道の券売機は結構難しい（複雑） 体験版の例： 東 西 odekake.net/guide/midori/otameshi.html odekake.net/guide/midori/otameshi.html

14 GUI デザイン 講義後半は GUI デザインに焦点を絞る – 特に画面デザイン – 画面全体のレイアウト – 部品設計，配置 – 配色，インストラクションなど ＋道具全体のデザイン これまでの授業内容を踏まえて実際に手がけ る

15 GUI デザインの流れ 1. 情報の把握 システムの目標の確認，把握，ユーザの特定 誰が，いつ，どこで，何を，どうする，を明確化 2. 情報の構造化 情報の分類，優先順位付け，提示順などの決定 体系化 3. 情報の可視化 1,2 で決めたことを実際に形に表現する

16 1. 情報の把握 システム全体の目標の明確化 – 目的は？（何をするための道具か？） システム仕様 – どんな機械か？ 装置の概要，運用条件，機能要件など ユーザとのやりとり（ UI ），ユーザがやること （タスク） ユーザの明確化 – 使うのはどんな人？ 職業，年齢，性別，教育レベル，メンタルモデ ルなど

17 2. 情報の構造化 情報の分類 – 提示すべき情報のリストアップ – 機能や種類による分類 情報の優先順位 – どの情報が重要性が高いか – 情報の順序性の認識 情報の提示順序 – 提示戦略，最適な提示順の検討

18 3. 情報の可視化 わかりやすく，見やすく，使いやすい GUI デザイン（画面）を設計 →GUI デザイン開発のステップ

19 GUI デザインの開発ステップ 1. デザインコンセプトの立案 2. 基本デザイン 3. 基本デザインでのプロトタイプ作成 4. 詳細デザイン 5. 詳細デザインでのプロトタイプ作成 6. 発表（できあがり）

20 デザインコンセプトの立案 どんな GUI デザインをするのか，基本的な コンセプトを考える．．．例えば – 誰にでもわかりやすい，表示を細かく ⇔熟達者向けに効率よい，表示はあまりいら ない – 間違いにくく，ステップバイステップで ⇔てっとりばやく操作できるように –24 時間稼動させる ⇔決まった期間だけ動かす たくさん出して，整頓することで明確化

21 基本デザイン GUI デザインの基本要素は大きくわけて 3 点 1. フォーマットデザイン 1 枚の画面のデザイン 2. シーケンスデザイン 全画面の表示順をデザイン 3. パーツデザイン アイコン，ウィンドウ，ボタンなどをデザイン

22 基本デザイン（ 2 ） 1. フォーマットデザイン： 1 枚の画面のデザイン 2. シーケンスデザイン：全画面の表示順をデザ イン 3. パーツデザイン：アイコン，ウィンドウ，ボ タンなど ユーザの情報処理過程を考えることが重 要 - ユーザの視覚特性 → 画面レイアウト， - ユーザの認知特性 → 画面提示順序， - ユーザに分かる用語やパーツを考えるな ど

23 基本デザインでのプロトタイプ作 成 基本デザインを生かして試作品（プロト タイプ）を作成する – 作ってみないとわからないこともある – とりあえず，表現してみる – 検討をし，次の詳細デザインにつなげる

24 詳細デザイン 基本デザインでのプロトタイプから – 視覚的な見やすさ – 認知的なわかりやすさ – 操作上の使いやすさ – 美しさ などに注意して，詳細なデザインを行う

25 詳細デザイン（ 2 ） 視覚的な見やすさの検討（視覚的要素） – 情報量はどうか？ 適度な情報量，適切なグループ化 – 検索性はどうか？ （ものの見つけ易さ）強調表示，シンボル化の具 合 – 可読性はよいか？ （読み易さ）文字など大きさ，文字や図の配置 – 視認性はどうか？ 周りの環境との対比，画面の明るさなど

26 詳細デザイン（ 3 ） 認知的なわかりやすさ（認知的要素） – 理解できるか？ 画面（システム）を見て，何をすべきかがわかる か – 対応付けの具合はどうか？：適確な情報提示 最適な用語，表示と機能の対応，操作手順の明示 – 可視性とフィードバックがあるか？ 操作の手がかり，次に行うことの手がかりの提示 – ユーザのメンタルモデルとの一致 思ったとおりの結果になるか

27 詳細デザイン（ 4 ） 操作しやすさ，使いやすさ – 画面操作時のキーボード，タッチ型ディスプ レイなどの位置が，ユーザにちょうどいい場 所にあるか？ 装置の高さ，ボタンなどの大きさ，硬さ，反応速 度など 長く使う場合には疲れないかなども考慮

28 詳細デザイン（ 5 ） 見た目の美しさ – 美的な統一感，均整のとれた配置など 装置（道具）単独の美しさ 周りの環境との融合など – シンプルなレイアウトと色彩のバランス GUI 画面の美しさ – 「美しい」には 見やすい，わかりやすいなども含まれる

29 詳細デザインでのプロトタイプ試 作 詳細デザインを生かして，完成版に近い プロトタイプを作成する – 評価 評価点は作成する時に考慮した，システムの目的， ユーザに対する利用しやすさ，わかりやすさ，周 囲との関係などなど 商業的にはコスト面も考える必要あり．

30 発表（できあがり） 詳細デザインのプロトタイプを検討し， 満足のいく結果を得れば，できあがり – ただし，実際に使用してみて不具合や修正す べき点があれば，改良したり，次のバージョ ンで生かす．

31 GUI デザインの検討 簡単な電車の券売機を検討対象 – 情報の把握，構造化，可視化プロセスを体 験 1. 券売機という道具の基本概念，概要 – 役割，対象ユーザ，使用環境など 2. どんな機能，操作があるか（操作フロー） 3. どんなデザインにするか？

32 例：鉄道の券売機を考える まずは，かなり単純な鉄道の券売機を仮 定 – 路線が 1 つしかない． 乗り継ぎなし．他の鉄道会社との乗り入れもなし – 西武多摩川線はどうだろう？ でも，武蔵境からの JR への乗り継ぎがある．．． 多摩川線の武蔵境駅だけは条件をクリア！ → 西武多摩川線の武蔵境駅の券売機に限定 ＜次回以降＞

33 例：鉄道の券売機を考える 実例はこんな感じ 西武鉄道 多摩川線 武蔵境 駅

34 例：鉄道の券売機を考える 他の駅ではもう少し複雑 西武鉄道 多摩川線 多磨」 駅

35 例：鉄道の券売機を考える 旧型 東京メトロ 丸の内線 荻 窪駅

36 例：鉄道の券売機を考える 一代前 東京メトロ 丸の内線 荻 窪駅

37 例：鉄道の券売機を考える 最新型？ 東京メトロ 丸の内線 荻 窪駅

38 例：鉄道の券売機を考える 都営地下鉄 都営地下鉄大江戸線若松河田駅

39 例：鉄道の券売機を考える 結構 複雑 都営地下鉄大江戸線若松河田駅

40 例：鉄道の券売機を考える 使い方の説明 都営地下鉄大江戸線若松河田駅