人間とコンピュータ 2006年度2学期 第11回 本日の内容 • GUIデザインの流れの確認（おさらい） • GUIデザインの検討 – 事例を用いた具体例 （鉄道の発券機） 2 GUIデザインの流れ（おさらい） 1. 情報の把握 システムの目標の確認，把握，ユーザの特定 誰が，いつ，どこで，何を，どうする，を明確化 2. 情報の構造化 情報の分類，優先順位付け，提示順などの決定 体系化 3. 情報の可視化 1,2で決めたことを実際に形に表現する 3 1.情報の把握 • システム全体の目標の明確化 – 目的は？（何をするための道具か？） • システム仕様 – どんな機械か？ • • • 装置の概要，運用条件，機能要件など ユーザとのやりとり（UI），ユーザがやること（タスク） ユーザの明確化 – 使うのはどんな人？ • 職業，年齢，性別，教育レベル，メンタルモデルなど 4 2.情報の構造化 • 情報の分類 – 提示すべき情報のリストアップ – 機能や種類による分類 • 情報の優先順位 – どの情報が重要性が高いか – 情報の順序性の認識 • 情報の提示順序 – 提示戦略，最適な提示順の検討 5 3.情報の可視化 • わかりやすく，見やすく，使いやすい GUIデザイン（画面）を設計 →GUIデザイン開発のステップ 6 GUIデザインの開発ステップ 1. 2. 3. 4. 5. 6. デザインコンセプトの立案 基本デザイン 基本デザインでのプロトタイプ作成 詳細デザイン 詳細デザインでのプロトタイプ作成 発表（できあがり） 詳細は，具体例で． 7 GUIデザインの検討 • 簡単な電車の券売機を検討対象 – 情報の把握，構造化，可視化プロセスを体験 1. 券売機という道具の基本概念，概要 – 役割，対象ユーザ，使用環境など 2. どんな機能，操作があるか（操作フロー） 3. どんなデザインにするか？ 8 イメージをふくらめるために．．． • テーマは鉄道の自動券売機！ • まずは，かなり単純な鉄道の券売機を仮定 条件： 他の鉄道会社との乗り入れなし 具体的には，西武多摩川線の武蔵境駅限定 （他の駅では，JRへの乗り継ぎ切符がある） 9 イメージをふくらめるために．．．（2） • 実例はこんな感じ 西武鉄道 多摩川線 武蔵境駅 10 1.情報の把握 • システム全体の目標の明確化 • システム仕様 • ユーザの明確化 なんてことをうまく把握したい 11 1.情報の把握（2） • とにかく思いつく限りを出してみる 装置の名前： どんな機能： 誰が使う： 12 1.情報の把握（3） • とにかく思いつく限りを出してみる 装置の名前： 内省：自分の頭の中で考える ロールプレイで考える どんな機能： 実例に学ぶ 誰が使う： などしてアイディアを出す 13 1.情報の把握（4） • 装置名：単純な自動券売機 • どんな機能： お金投入．切符の選択ボタ ン．発券．取り消し．金額の 表示．投入金額の表示．発 券時に日付，大人と子供． • 利用者：老若男女（小学生 以上？）．健常者，障害者 • ボタン：表示タイプ – D1：金額式（140円，170円） – D2：行先式（新小金井，多磨， 白糸台，競艇場前，是政） • ボタン：方式 – T1：タッチパネル方式 – T2：物理的ボタン方式 • 間違えた時の取り消し • 係を呼ぶボタン 14 2.情報の構造化 • 情報の分類 – 提示すべき情報のリストアップ – 機能や種類による分類 • 情報の優先順位 – どの情報が重要性が高いか – 情報の順序性の認識 • 情報の提示順序 – 提示戦略，最適な提示順の検討 15 2.情報の構造化（2） • 提示すべき情報 券の金額，行き先，現在の 投入金額，機械の現在の 状態，トラブル対策（やり直 し，呼び出し）の情報 • 情報の分類 券についての表示（金額， 行先） 状態を伝える表示（必要金 額，投入金額） 利用者への指示表示 トラブル対応の情報 • 重要度と提示順 現在の状態がわかる表示 は常に必要 手順は難しい（例） （U1）行き先ボタンを押す （M1）必要金額提示 （U2）お金投入 （M2）清算→発券 ＊割り込み可能（取り消し） 16 2.情報の構造化（3） • 重要度と提示順 手順は難しい（例） （U1）行き先ボタンを押す （M1）必要金額提示 （U2）お金投入 （M2）清算→発券 ＊割り込み可能（取り消し） • 重要度と提示順 手順は難しい（例2） （U1）お金投入 （M1）金額ボタン点灯 （U2）ボタン選択 （M2）清算→発券 ＊割り込み可能（取り消し） 17 2.情報の構造化（4） • 重要度と提示順 手順は難しい（例2） （U1）お金投入 （M1）金額ボタン点灯 （U2）ボタン選択 （M2）清算→発券 ＊割り込み可能（取り消し） • 重要度と提示順 手順は難しい（例3） （U1）お金投入 （M1）行き先ボタン点灯 （U2）ボタン選択 （M2）清算→発券 ＊割り込み可能（取り消し） 単純なようでも操作系列はいろいろ考え られる 18 1.情報の把握（5） •係員呼び出し 実例 大人，子供 とりけし 行先表示 西武鉄道 多摩川線 武蔵境駅 金額表示 ここまで出関係のあ るところだけ指示 19 3.情報の可視化 • わかりやすく，見やすく，使いやすい GUIデザイン（画面）を設計 →GUIデザイン開発のステップ 20 3.情報の可視化（2） • その前に，決めておかないとデザイン上困る こと • ボタン：表示タイプ – D1：金額式（140円，170円） – D2：行先式（新小金井，多磨，白糸台，競艇場前，是政） • ボタン：方式 – T1：タッチパネル方式 – T2：物理的ボタン方式 21 ボタンの検討 • ボタン：表示タイプ – D1：金額式（140円，170円）．．．例えば 140 170 – D2：行先式（新小金井，多磨，白糸台，競艇場前，是政） 新小 金井 多磨 あ 白糸 台 競艇 場前 是政 あ 22 ボタンの検討 • ボタン：表示タイプ – D1：金額式（140円，170円）．．．例えば 140 170 – D2：行先式（新小金井，多磨，白糸台，競艇場前，是政） 新小金 井 多磨あ い 白糸台 あ 競艇場 前 是政あ い ユーザが行き先の値段を事前に知る必要あり（D1）なし（D2） ボタンの数が少しでいい（D1）たくさん必要になる（D2） などという違いがあるが，それぞれに長所短所がある 23 ボタンの検討 • ボタン：方式 – T1：タッチパネル方式 140 170 – T2：物理的ボタン方式 シンプル（T2）複雑（T1）点字対応が楽（T2） 多機能（T1）機能は限られる（T2） フィードバックがわかりやすい（T2）わかりにくい（T1） などという違いがあるが，それぞれに長所短所がある 24 3.情報の可視化（3） • その前に，決めておかないとデザイン上困る こと • ボタン：表示タイプ – D1：金額式（140円，170円） – D2：行先式（新小金井，多磨，白糸台，競艇場前，是政） • ボタン：方式 – T1：タッチパネル方式 – T2：物理的ボタン方式 ということにしておく．（GUIがメインなので） 25 GUIデザインの開発ステップ 1. 2. 3. 4. 5. 6. デザインコンセプトの立案 基本デザイン 基本デザインでのプロトタイプ作成 詳細デザイン 詳細デザインでのプロトタイプ作成 発表（できあがり） 26 デザインコンセプトの立案 • 使う人は老若男女，健常者，障害者 – 誰にでも分かりやすく – 間違った操作をしにくく – 操作速度よりも確実さを優先 – 見てどうすればいいか分かりやすく 27 基本デザイン GUIデザインの基本要素は大きくわけて3点 1. フォーマットデザイン 1枚の画面のデザイン 2. シーケンスデザイン 全画面の表示順をデザイン 3. パーツデザイン アイコン，ウィンドウ，ボタンなどをデザイン 28 基本デザイン（2） • パーツデザインから – ボタン類 • • • • 金額ボタン 取り消しボタン 係呼び出しボタン その他，何かあるか？ 29 基本デザイン（2） • パーツデザインから – ボタン類 • • • • • 金額ボタン デザインしてください 取り消しボタン 係呼び出しボタン 大人，子供切り替えボタン その他，何かあるか？ 30 31 基本デザイン（3） • フォーマットデザイン（粗く） – 1. 2. 3. 4. 5. 6. 7. 操作順をなぞりながら お金が入っていない画面（初期画面） お金が投入された画面 券が選択された画面 お金が足りない時の画面 発券された画面 取り消しが押された時の画面 係員呼び出しが押された時の画面 など 32 基本デザイン（3） • フォーマットデザイン（粗く） – 1. 2. 3. 4. 5. 6. 7. 操作順をなぞりながら お金が入っていない画面（初期画面） お金が投入された画面 必要となるであろう画面をデザイン 券が選択された画面 （項目を挙げて下さい） お金が足りない時の画面 発券された画面 取り消しが押された時の画面 係員呼び出しが押された時の画面 など 33 基本デザイン（4） • フォーマットデザイン（細かく） – 決めた各項目（画面）に，部品を配置して画面を 作る！ 作ってみてください 34 基本デザイン（5） • シーケンスデザイン – フォーマットデザインで作った各画面の遷移を考 える 35 基本デザイン（6） • シーケンスデザイン – フォーマットデザインで作った各画面の遷移を考 える 考えてください 36 基本デザインでのプロトタイプ作成 • 基本デザインでプロトタイプを作成 – 作ってみてください – 紙上で手書きでOK 37 詳細デザイン • 不都合な点，足りない点 • 付け加えた方がよい点 – 視覚的なわかりやすさ – 認知的なわかりやすさ この観点から検討し，詳細デザインに進む 38 詳細デザイン（2） • 詳細デザインを検討して下さい． – 実際例には 1人用，2人用，3人用，4人用ボタン 往復切符ボタン がある． 音声案内はどうだろうか？ 39 1.情報の把握（5） •係員呼び出し 実例 大人，子供 とりけし 行先表示 金額表示 40 西武鉄道 多摩川線 武蔵境駅 次回 • 詳細デザインを進める． →次回までに考えておくこと！ • JR乗り換えも含めた他の駅の券売機に拡張 する – アイディアを考えておくこと． 41
© Copyright 2025 ExpyDoc
