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

本日の内容 GUIデザインの流れの確認（おさらい） GUIデザインの検討 事例を用いた具体例 （鉄道の発券機）

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

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

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

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

GUIデザインの開発ステップ デザインコンセプトの立案 基本デザイン 基本デザインでのプロトタイプ作成 詳細デザイン 詳細デザインでのプロトタイプ作成 発表（できあがり） 詳細は，具体例で．

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

イメージをふくらめるために．．． テーマは鉄道の自動券売機！ まずは，かなり単純な鉄道の券売機を仮定 条件： 他の鉄道会社との乗り入れなし 条件：　他の鉄道会社との乗り入れなし 具体的には，西武多摩川線の武蔵境駅限定 （他の駅では，JRへの乗り継ぎ切符がある）

イメージをふくらめるために．．．（2） 実例はこんな感じ 西武鉄道　多摩川線　武蔵境駅

1.情報の把握 システム全体の目標の明確化 システム仕様 ユーザの明確化 なんてことをうまく把握したい

1.情報の把握（2） とにかく思いつく限りを出してみる 装置の名前： どんな機能： 誰が使う：

1.情報の把握（3） とにかく思いつく限りを出してみる 装置の名前： どんな機能： 内省：自分の頭の中で考える ロールプレイで考える 誰が使う： 内省：自分の頭の中で考える ロールプレイで考える 実例に学ぶ などしてアイディアを出す

1.情報の把握（4） 装置名：単純な自動券売機 どんな機能： お金投入．切符の選択ボタン．発券．取り消し．金額の表示．投入金額の表示．発券時に日付，大人と子供． 利用者：老若男女（小学生以上？）．健常者，障害者 ボタン：表示タイプ D1：金額式（140円，170円） D2：行先式（新小金井，多磨，白糸台，競艇場前，是政） ボタン：方式 T1：タッチパネル方式 T2：物理的ボタン方式 間違えた時の取り消し 係を呼ぶボタン

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

2.情報の構造化（2） 提示すべき情報 券の金額，行き先，現在の投入金額，機械の現在の状態，トラブル対策（やり直し，呼び出し）の情報 情報の分類 券についての表示（金額，行先） 状態を伝える表示（必要金額，投入金額） 利用者への指示表示 トラブル対応の情報 重要度と提示順 現在の状態がわかる表示は常に必要 手順は難しい（例） （U1）行き先ボタンを押す （M1）必要金額提示 （U2）お金投入 （M2）清算→発券 ＊割り込み可能（取り消し）

2.情報の構造化（3） 重要度と提示順 手順は難しい（例） （U1）行き先ボタンを押す （M1）必要金額提示 （U2）お金投入 ＊割り込み可能（取り消し） 重要度と提示順 手順は難しい（例2） （U1）お金投入 （M1）金額ボタン点灯 （U2）ボタン選択 （M2）清算→発券 ＊割り込み可能（取り消し）

2.情報の構造化（4） 単純なようでも操作系列はいろいろ考えられる 重要度と提示順 手順は難しい（例2） （U1）お金投入 （M1）金額ボタン点灯 （U2）ボタン選択 （M2）清算→発券 ＊割り込み可能（取り消し） 重要度と提示順 手順は難しい（例3） （U1）お金投入 （M1）行き先ボタン点灯 （U2）ボタン選択 （M2）清算→発券 ＊割り込み可能（取り消し） 単純なようでも操作系列はいろいろ考えられる

1.情報の把握（5） 実例 ここまで出関係のあるところだけ指示 係員呼び出し 大人，子供 とりけし 行先表示 金額表示 とりけし　 行先表示 西武鉄道　多摩川線　武蔵境駅 金額表示 ここまで出関係のあるところだけ指示

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

3.情報の可視化（2） その前に，決めておかないとデザイン上困ること ボタン：表示タイプ ボタン：方式 D1：金額式（140円，170円） T1：タッチパネル方式 T2：物理的ボタン方式

ボタンの検討 140 170 ボタン：表示タイプ D1：金額式（140円，170円）．．．例えば 新小金井 多磨あ 白糸台 競艇場前 是政あ

ボタンの検討 140 170 ボタン：表示タイプ ユーザが行き先の値段を事前に知る必要あり（D1）なし（D2） などという違いがあるが，それぞれに長所短所がある 140 170 新小金井 多磨あい 白糸台あ 競艇場前 是政あい

ボタンの検討 140 170 ボタン：方式 シンプル（T2）複雑（T1）点字対応が楽（T2） 多機能（T1）機能は限られる（T2） などという違いがあるが，それぞれに長所短所がある 140 170

3.情報の可視化（3） その前に，決めておかないとデザイン上困ること ボタン：表示タイプ ボタン：方式 D1：金額式（140円，170円） D2：行先式（新小金井，多磨，白糸台，競艇場前，是政） ボタン：方式 T1：タッチパネル方式 T2：物理的ボタン方式 ということにしておく．（GUIがメインなので）

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

デザインコンセプトの立案 使う人は老若男女，健常者，障害者 誰にでも分かりやすく 間違った操作をしにくく 操作速度よりも確実さを優先 見てどうすればいいか分かりやすく

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

基本デザイン（2） パーツデザインから ボタン類 金額ボタン 取り消しボタン 係呼び出しボタン その他，何かあるか？

基本デザイン（2） デザインしてください パーツデザインから ボタン類 金額ボタン 取り消しボタン 係呼び出しボタン 大人，子供切り替えボタン その他，何かあるか？ デザインしてください

基本デザイン（3） フォーマットデザイン（粗く） 操作順をなぞりながら お金が入っていない画面（初期画面） お金が投入された画面 券が選択された画面 お金が足りない時の画面 発券された画面 取り消しが押された時の画面 係員呼び出しが押された時の画面　　など

基本デザイン（3） フォーマットデザイン（粗く） 必要となるであろう画面をデザイン （項目を挙げて下さい） 操作順をなぞりながら お金が入っていない画面（初期画面） お金が投入された画面 券が選択された画面 お金が足りない時の画面 発券された画面 取り消しが押された時の画面 係員呼び出しが押された時の画面　　など 必要となるであろう画面をデザイン （項目を挙げて下さい）

基本デザイン（4） フォーマットデザイン（細かく） 決めた各項目（画面）に，部品を配置して画面を作る！ 作ってみてください

基本デザイン（5） シーケンスデザイン フォーマットデザインで作った各画面の遷移を考える

基本デザイン（6） シーケンスデザイン フォーマットデザインで作った各画面の遷移を考える 考えてください

基本デザインでのプロトタイプ作成 基本デザインでプロトタイプを作成 作ってみてください 紙上で手書きでOK

詳細デザイン 不都合な点，足りない点 付け加えた方がよい点 視覚的なわかりやすさ 認知的なわかりやすさ この観点から検討し，詳細デザインに進む

詳細デザイン（2） 詳細デザインを検討して下さい． 実際例には 1人用，2人用，3人用，4人用ボタン 往復切符ボタン がある． 音声案内はどうだろうか？

1.情報の把握（5） 実例 係員呼び出し 大人，子供 とりけし　 行先表示 金額表示 西武鉄道　多摩川線　武蔵境駅

次回 詳細デザインを進める． →次回までに考えておくこと！ JR乗り換えも含めた他の駅の券売機に拡張する アイディアを考えておくこと．