技術要素(1)
ヒューマンインタフェース
ヒューマンインタフェース技術
一般的に、人やハードウェア、ソフトウェアが情報を交換する設定を、インタフェース設計(Interface)という。その中でも、コンピュータと人間との間で情報をやり取りする接点が特に「ヒューマンインタフェース(HumanInterface)」と呼ばれている。コンピュータにおけるヒューマンインタフェース設計は、テレビのスイッチやドアノブと同様に、人間にとっての操作性・生産性を向上させるために設計され、かつ機能することが求められる
GUI (Graphical User Interface)
視覚的な表示とポインティングデバイスを用いた直感的な操作を可能にするヒューマンインタフェース設計
名 称 | 説 明 |
---|---|
デスクトップ | 表示領域の基礎となる領域で、基本的にディスプレイと同じ大きさ。この上にウィンドウ等の各種要素が表示される |
ウィンドウ | 個々のアプリケーションを扱うためにデスクトップ上に独立して表示される表示領域 |
スクロールバー | ウィンドウの表示サイズでは表示しきれていない部分を表示させるために領域を移動するための要素 |
アイコン | アプリケーションや機能を絵で示すもの。クリックすることで所定のプログラムを実行する |
テキスト ボックス | 文字や数値データをキーボードから入力する |
メニューバー | 各種機能を分類、一覧標示している部分。該当するメニューを選択すると機能が表示される |
プルダウン メニュー | メニューバーの表示方法の一種。選択すると項目の一覧が垂れ下がる形で表示される |
ラジオボタン | 一連の項目の中から一つの項目を選択する際に利用。ある項目にチェックを入れた状態で、別の項目にチェックを入れると、最初にチェックした項目のチェックが自動的に解除される |
チェック ボックス | 一連の項目の中から複数の項目を選択したり、各項目についてそれぞれオン・オフを設定したりする場合に利用 |
リストボックス | 複数項目のリストから任意の項目を指定する際に利用。選択形式で選択肢が多くなる場合に使用 |
ヘルプ機能 | 利用者が操作内容を参照できるマニュアルを表示。表示方法として、ヘルプボタンをクリックし、マニュアルを表示する方法や、自動でポップアップして該当項目の簡易アドバイスを表示させることもある |
ポップアップメニュー | 画面の内容を表示しながら、画面の任意の位置に表示されるメニュー。「ショートカットキー」 |

インタフェース設計
インタフェース設計の設計には大きく分けて「画面設計」と「帳票設計」の2種類がある
画面設計 | データを入力する際の画面の項目やレイアウトなどの操作方法を設計する |
---|---|
帳票設計 | 入力する用紙や入力原票のレイアウト、プリンタに出力する内容などを設計する |
・出力するデータの目的と項目を明確にする。次にその出力に必要な入力データを 明確にする ・入力画面の利用者や帳票の提出先が、社内の人間か、顧客かを明確にして形式を 整える ・利用者の熟練度に応じて、適切なヒューマンインタフェースを選択する ・入出力の内容に応じた装置を選定する ・レスポンスタイムやターンアランタイムを短くし、処理を待つ時間が長くならないように 配慮する ・操作ミスやシステム障害への対処方法を明確にする ・入力されたデータが外部に流出しないような対策を練る |
画面設計
入力画面設計手順
例)DVD登録・検索システム
・入力の流れが自然になるよう、左から右、上から下へ移動する並びにする ・選択肢の数が多いときは、選択肢をグループ分けするなどして選択しやすくする ・色の使い方にルールを設ける ・操作に慣れていない人のために操作ガイド(ヘルプ)を表示する ・利用目的に応じて、キーボード以外の入力装置(バーコード、タッチパネル、スキャナ など)でも使用できるようにする |
ファンクションキー
特定の機能(function)が割り当てられているキーボードのキーのこと
デフォルト値
あらかじめ項目に設定しておく値のこと。データを入力すると、設定した値に置き換えることができる
帳票設計
入力画面設計手順
・各帳票に共通する項目は、同じような場所に配置する ・余分な情報は除いて必要最小限の情報を盛り込む ・数値データなどは3桁ごとにカンマを付けるなどして読みやすくする ・目的に応じて、表やグラフ、図形などを使い分けたレイアウトにする ・目的に応じて、バーコードなどの特殊な出力も考慮する |
WYSIWYG(ウィジウィグ)
「見たものが、そのまま手に入るもの」という意味。画面表示と印刷結果がおなじであること
Webデザイン
・スタイルシートを利用し、色調やデザインを統一する ・画像の利用を最小限にし、ストレスのない操作性を実現する ・ページの数が非常に多数に及ぶ、利用者に求める選択肢が多岐になる場合は、Web ページ構成や選択肢をグループ化、階層化するなどして、混乱をきたさないようにする ・特定のWWWブラウザでしか表示できない機能は盛り込まず、どのWWWブラウザでも 表示できるようにする |
スタイルシート
文字の書体やサイズ、背景、余白などWebページのさまざまな書式(スタイル)を設定するもの。スタイルシートを利用すると、Webページのデザインをまとめて管理できるため、デザインを効率よく設定、変更が可能。Webサイト全体の容量を抑えることが可能
ユーザビリティ
利用者の感じる使いやすさのこと。操作の分かりやすさやWebページをデザインする指標
ユニバーサルデザイン
言葉の違い、文化の違い、性別や年齢、身体的ハンディの有無など、さまざまな要因があっても、それに左右されることなく利用することができるようなデザイン、という観念。システム開発においても、ユニバーサルデザインの考え方を取り入れることにより、みんなが使いやすいしすてむの構築を目指す
1.どんな人でも公平に使えること(Equitable use) 2.使う上での柔軟性があること(Flexibility in use) 3.使い方が簡単で自明であること(Simple and intuitive) 4.必要な情報がすぐに分かること(Perceptible information) 5.うっかりミスが危険に繋がらないこと(Tolerance for error) 6.身体への過度な負担を必要としないこと(Low physical effort) 7.アクセスや利用のための十分な大きさと空間が確保されていること (Size and space for approach and use) |
アクセシビリティ
高齢者や障害者などを含むできる限り多くの人が情報に触れ、自分が求める情報やサービスを得ることができるように設計する指標。Webページの利用しやすさのことをWebアクセシビリティという
情報バリアフリー
情報機器の操作や利用時に障害となるバリアを取り除いて支障なく利用できるようにすること。基本的には、一部の障害や特性を持った人にとって使いやすい機器や見やすい画面は、すべての人にとって使いやすく、見やすいと考えられる
 

