Transcript 講義資料
人間とコンピュータ 2006年度2学期 第10回 本日の内容 • ヒューマンインタフェース • ユーザインタフェース – GUIとCUI • 簡単な画面デザインの例 – 善し悪しの検討 2 ヒューマンインタフェース • human interface (HI) *interfaceはインターフェイスと書くこともあり – 人間と人間が扱う機械，道具との情報のやりとり． – 人間の特性を踏まえて（生かして），スムーズに やりとりができるようにすることを目指す概念 – マンマシン・インタフェースとも呼ぶ 3 ヒューマンインタフェース（2） • 例えば：コンピュータを例にとると – ハードウェア：キーボードとか，マウスとか – ソフトウェア：パスワードやデータの入力画面とか， 操作ボタンとか →人間がコンピュータと関わる「接点」がinterface このインタフェースの善し悪しが道具の使い勝手や 分かりやすさに，非常に大きく影響する 4 ユーザインタフェース • user interface (UI) – human interfaceと良く似ている（場合によっては 同じように捉えることもある） – HIの方が広い範囲でのinterfaceを指し，UIは，コ ンピュータのOSやアプリケーションの画面デザイ ンや操作方法などの「使い勝手」，「使用感」を指 すことが多い． – 人とコンピュータや道具との接点ということは同じ． • 利用者としての人にとっての使い勝手 5 GUIとCUI • コンピュータにおけるCUIとGUI – CUI : Character-based User Interface • 全操作をキーボードからコマンド（命令）を打ち込んで 実行することで行うinterface MS-DOSが代表的 – GUI : Graphical User Interface • 視覚的にわかりやすく表示されたボタンやアイコン，画 像などをマウスなどのポインティングデバイスで操作 するより直感的なinterface MacOS, Windowsが代表的 6 これはCUIデザイン • これはCUIデザインの代表例 ここにコマンドを打ち込む try alt+enter 7 GUIとCUI • コンピュータにおけるCUIとGUI – CUI : Character-based User Interface • 全操作をキーボードからコマンド（命令）を打ち込んで 実行することで行うinterface MS-DOSが代表的 – GUI : Graphical User Interface • 視覚的にわかりやすく表示されたボタンやアイコン，画 像などをマウスなどのポインティングデバイスで操作 するより直感的なinterface MacOS, Windowsが代表的 8 GUIデザイン • デザイン対象は多岐にわたる – コンピュータアプリケーション画面 – 家電製品の操作部分 – 工業製品や工場などの機械の操作部分など • 操作デザインの形もさまざま – 対話式で操作するもの – 装置全体の様子を単に表示するもの – メニュー方式，検索方式など 9 GUIデザイン • これもGUIデザイン 10 GUIデザイン • これもGUIデザイン 11 GUIデザイン • これもGUIデザイン 鉄道の券売機 タッチパネル方式 東京メトロ 荻窪駅 12 GUIデザイン • GUIの例，つづき • 鉄道の券売機は結構難しい（複雑） 体験版の例： 東 http://www.jreast.co.jp/mv-guide/ 西 http://www.jrodekake.net/guide/midori/otameshi.html 13 GUIデザイン • 講義後半はGUIデザインに焦点を絞る – 特に画面デザイン – 画面全体のレイアウト – 部品設計，配置 – 配色，インストラクションなど ＋道具全体のデザイン これまでの授業内容を踏まえて実際に手がける 14 GUIデザインの流れ 1. 情報の把握 システムの目標の確認，把握，ユーザの特定 誰が，いつ，どこで，何を，どうする，を明確化 2. 情報の構造化 情報の分類，優先順位付け，提示順などの決定 体系化 3. 情報の可視化 1,2で決めたことを実際に形に表現する 15 1.情報の把握 • システム全体の目標の明確化 – 目的は？（何をするための道具か？） • システム仕様 – どんな機械か？ • • • 装置の概要，運用条件，機能要件など ユーザとのやりとり（UI），ユーザがやること（タスク） ユーザの明確化 – 使うのはどんな人？ • 職業，年齢，性別，教育レベル，メンタルモデルなど 16 2.情報の構造化 • 情報の分類 – 提示すべき情報のリストアップ – 機能や種類による分類 • 情報の優先順位 – どの情報が重要性が高いか – 情報の順序性の認識 • 情報の提示順序 – 提示戦略，最適な提示順の検討 17 3.情報の可視化 • わかりやすく，見やすく，使いやすい GUIデザイン（画面）を設計 →GUIデザイン開発のステップ 18 GUIデザインの開発ステップ 1. 2. 3. 4. 5. 6. デザインコンセプトの立案 基本デザイン 基本デザインでのプロトタイプ作成 詳細デザイン 詳細デザインでのプロトタイプ作成 発表（できあがり） 19 デザインコンセプトの立案 • どんなGUIデザインをするのか，基本的な コンセプトを考える．．．例えば – 誰にでもわかりやすい，表示を細かく ⇔熟達者向けに効率よい，表示はあまりいらない – 間違いにくく，ステップバイステップで ⇔てっとりばやく操作できるように – 24時間稼動させる ⇔決まった期間だけ動かす たくさん出して，整頓することで明確化 20 基本デザイン GUIデザインの基本要素は大きくわけて3点 1. フォーマットデザイン 1枚の画面のデザイン 2. シーケンスデザイン 全画面の表示順をデザイン 3. パーツデザイン アイコン，ウィンドウ，ボタンなどをデザイン 21 基本デザイン（2） 1. フォーマットデザイン：1枚の画面のデザイン 2. シーケンスデザイン：全画面の表示順をデザイン 3. パーツデザイン：アイコン，ウィンドウ，ボタンなど ユーザの情報処理過程を考えることが重要 -ユーザの視覚特性→画面レイアウト， -ユーザの認知特性→画面提示順序， -ユーザに分かる用語やパーツを考えるなど 22 基本デザインでのプロトタイプ作成 • 基本デザインを生かして試作品（プロトタイ プ）を作成する – 作ってみないとわからないこともある – とりあえず，表現してみる – 検討をし，次の詳細デザインにつなげる 23 詳細デザイン • 基本デザインでのプロトタイプから – 視覚的な見やすさ – 認知的なわかりやすさ – 操作上の使いやすさ – 美しさ などに注意して，詳細なデザインを行う 24 詳細デザイン（2） • 視覚的な見やすさの検討（視覚的要素） – 情報量はどうか？ • 適度な情報量，適切なグループ化 – 検索性はどうか？ • （ものの見つけ易さ）強調表示，シンボル化の具合 – 可読性はよいか？ • （読み易さ）文字など大きさ，文字や図の配置 – 視認性はどうか？ • 周りの環境との対比，画面の明るさなど 25 詳細デザイン（3） • 認知的なわかりやすさ（認知的要素） – 理解できるか？ • 画面（システム）を見て，何をすべきかがわかるか – 対応付けの具合はどうか？：適確な情報提示 • 最適な用語，表示と機能の対応，操作手順の明示 – 可視性とフィードバックがあるか？ • 操作の手がかり，次に行うことの手がかりの提示 – ユーザのメンタルモデルとの一致 • 思ったとおりの結果になるか 26 詳細デザイン（4） • 操作しやすさ，使いやすさ – 画面操作時のキーボード，タッチ型ディスプレイ などの位置が，ユーザにちょうどいい場所にある か？ • 装置の高さ，ボタンなどの大きさ，硬さ，反応速度など • 長く使う場合には疲れないかなども考慮 27 詳細デザイン（5） • 見た目の美しさ – 美的な統一感，均整のとれた配置など • 装置（道具）単独の美しさ • 周りの環境との融合など – シンプルなレイアウトと色彩のバランス • GUI画面の美しさ – 「美しい」には • 見やすい，わかりやすいなども含まれる 28 詳細デザインでのプロトタイプ試作 • 詳細デザインを生かして，完成版に近いプロ トタイプを作成する – 評価 • 評価点は作成する時に考慮した，システムの目的， ユーザに対する利用しやすさ，わかりやすさ，周囲と の関係などなど • 商業的にはコスト面も考える必要あり． 29 発表（できあがり） • 詳細デザインのプロトタイプを検討し，満足の いく結果を得れば，できあがり – ただし，実際に使用してみて不具合や修正すべ き点があれば，改良したり，次のバージョンで生 かす． 30 GUIデザインの検討 • 簡単な電車の券売機を検討対象 – 情報の把握，構造化，可視化プロセスを体験 1. 券売機という道具の基本概念，概要 – 役割，対象ユーザ，使用環境など 2. どんな機能，操作があるか（操作フロー） 3. どんなデザインにするか？ 31 例：鉄道の券売機を考える • まずは，かなり単純な鉄道の券売機を仮定 – 路線が1つしかない． • 乗り継ぎなし．他の鉄道会社との乗り入れもなし – 西武多摩川線はどうだろう？ • でも，武蔵境からのJRへの乗り継ぎがある．．． • 多摩川線の武蔵境駅だけは条件をクリア！ →西武多摩川線の武蔵境駅の券売機に限定 ＜次回以降＞ 32 例：鉄道の券売機を考える • 実例はこんな感じ 西武鉄道 多摩川線 武蔵境駅 33 例：鉄道の券売機を考える • 他の駅ではもう少し複雑 西武鉄道 多摩川線 多磨」駅 34 例：鉄道の券売機を考える • 旧型 東京メトロ 丸の内線 荻窪駅 35 例：鉄道の券売機を考える • 一代前 東京メトロ 丸の内線 荻窪駅 36 例：鉄道の券売機を考える • 最新型？ 東京メトロ 丸の内線 荻窪駅 37 例：鉄道の券売機を考える • 都営地下鉄 都営地下鉄大江戸線若松河田駅 38 例：鉄道の券売機を考える • 結構 • 複雑 都営地下鉄大江戸線若松河田駅 39 例：鉄道の券売機を考える • 使い方の説明 都営地下鉄大江戸線若松河田駅 40