「ヒューマンインターフェース」カテゴリーアーカイブ

ヒューマンインタフェース技術

情報処理技術者試験での学習内容

【応用情報・基本情報】
・インフォメーションアーキテクチャの考え方,目的を修得し,応用する。
・代表的なヒューマンインタフェース技術の種類,特徴を修得し,応用する。
・GUI の特徴,構成部品,GUI 画面設計の手順,留意事項を修得し,応用する。

【ITパスポート】
・ヒューマンインタフェースの特徴を理解する。

(1)インフォメーションアーキテクチャ 基本情報 応用情報

インフォメーションアーキテクチャ(情報アーキテクチャ)の考え方,目的,情報の組織化(五十音,カテゴリなど),構造化(階層型,タグ付けなど)などを理解する。

用語例:ラベル,チャンク,ナビゲーション,LATCH(Location,Alphabet,Time,Category,Hierarchy)法,階層型,直線型,Web リンク型,フォークソノミー型,セマンティックWeb,メタデータ

(2)ヒューマンインタフェース ITパスポート 基本情報 応用情報

ヒューマンインタフェースを決定する要件,インタフェースを実現する技術の種類,特徴を理解する。

用語例:ユーザビリティ,アクセシビリティ,インタラクティブシステム,音声認識,画像認識,動画認識,特徴抽出,学習機能,選択的知覚,ユーザ操作の分析,身体的適合性,ノンバーバルインタフェース,マルチモーダルインタフェース,空間型インタフェース,自然言語インタフェース

(3)GUI ITパスポート 基本情報 応用情報

グラフィックスを用いた視覚的な表示,ポインティングデバイスなどによる直感的な操作などGUI の特徴,GUI で使われる構成部品の特徴と役割,GUI 画面設計やシナリオなどを使用した設計の手順と留意事項を理解する。

用語例:ウィンドウ,アイコン,ラジオボタン(ラジオボックス),チェックボックス,リストボックス,プルダウンメニュー,ポップアップメニュー,テキストボックス

 

インフォメーションアーキテクチャ

この記事での学習内容 基本情報 応用情報

インフォメーションアーキテクチャ(情報アーキテクチャ)の考え方,目的,情報の組織化(五十音,カテゴリなど),構造化(階層型,タグ付けなど)などを理解する。

用語例:ラベル,チャンク,ナビゲーション,LATCH(Location,Alphabet,Time,Category,Hierarchy)法,階層型,直線型,Web リンク型,フォークソノミー型,セマンティックWeb,メタデータ

情報アーキテクチャ

情報アーキテクチャ(インフォメーションアーキテクチャ)とは、ユーザインタフェースの情報の構造です。建築になぞらえてアーキテクチャといいます。情報アーキテクチャの設計技法や定石を用いたり、設計基準を制定したりしつつ、アーキテクチャの設計・開発・検証をします。

情報アーキテクチャの考え方は、紙面のデザインを基盤にしていますし、一般的な情報の構造化はデータベースに技術が蓄積されています。

情報アーキテクチャの設計の目的は、ユーザのわかりやすさ、探しやすさ、操作のしやすさを向上させることです。

ユーザインタフェースの場合には、ディスプレイ上の2次元の広がりに加えて、階層という3次元目、そして対話型機能によるユーザの操作の流れという4次元目が加わります。また、ユーザが語句を入力する随時の検索も加わります。

情報アーキテクチャの設計には、次のようなことがあります。

  • 情報の組織化として、分類(カテゴリー)や五十音順などの整列の仕方を決定します。
  • 情報の表現の構造化として、階層型の画面やメニューの構成を決めたり、表現の性質を表すメタデータをタグ付けしたりすることがあります。
  • 複数の情報のチャンク(かたまり)を決めてラベルを付けることは、本質的情報の分類と表現上の配置の両方に関わります。
  • 情報間の移動の案内手段であるナビゲーションを設計します。

ナビゲーション

ユーザが情報の間をどのように移動するかを分析して、案内手段であるナビゲーションを設計します。次のようなナビゲーションを組み合わせます。

なお、以下の記述ではウェブサイトのデザインを前提に記載していますが、一般的なGUIアプリケーションでもこれらの観点は大事になってきます。

ページの位置関係によるリンク

ホームページリンク
ウェブページ群の起点のページへ戻るリンク
前ページリンク
現在のページの一つ前に戻るリンク
次ページリンク
現在のページの一つ先に進むリンク
ページトップ
現在のページ自身の先頭へ戻るリンク

先頭部および最後尾のナビゲーション

グローバルメニュー
同じウェブサイトのどのページを開いても、先頭部に表示される標準のメニュー
トピックパス(パンくずリスト)
「ホーム>製品情報>洗濯機」のように、ホームページから現在のページまでの分類体系の枝の連鎖を示す先頭部の表示。
フッターメニュー
同じウェブサイトのどのページを開いても、最後尾に表示される標準のメニュー。グローバルメニューを補助する。
コンテンツ内リンク
ページの内容から別の情報へ移動するリンク。例えば文章中のキーワードそのものにリンクを兼ねさせます。

先頭部・最後尾以外のナビゲーション

ページの先頭部・最後尾以外には、次のようなメニューを配置する定石があります。配置のルールをあらかじめ決めておくことが重要です。

  • 左側にいつも同じメニュー、右側に宣伝したい特別リンクを配置する。
  • その逆に、左側に特別リンク、右側にいつも同じメニューを配置する。
  • 先頭部のメニューのすぐ次に特別リンク、左側にいつも同じメニューを配置する。
  • それらのメニューは、グローバルメニューに比べて、写真やイラスト等の目を引くデザインにしたり、キャッチコピー等を補足したり、目次階層を示したりする。

カテゴリー別メニュー

カテゴリー別メニューは、前述のようなメニュー以外の任意の分類ごとのメニューです。分類の特徴に応じて設計します。

サイトマップ

ウェブサイトの全てのページ見出しを、分類体系の木構造として示す表示です。分類の枝をたどっても、目的のページが見つからない場合に使います。

 

ヒューマンインタフェース

この記事での学習内容 ITパスポート 基本情報 応用情報

ヒューマンインタフェースを決定する要件,インタフェースを実現する技術の種類,特徴を理解する。

用語例:ユーザビリティ,アクセシビリティ,インタラクティブシステム,音声認識,画像認識,動画認識,特徴抽出,学習機能,選択的知覚,ユーザ操作の分析,身体的適合性,ノンバーバルインタフェース,マルチモーダルインタフェース,空間型インタフェース,自然言語インタフェース

ヒューマンインタフェース

ヒューマンインタフェースとは、コンピュータと人間が遣り取りをする部分のことです。具体的には、人間がコンピュータへ指示を入力するキー操作の機能や、コンピュータから人間へ処理結果を返す画面表示や印刷などの機能を指します。ユーザインタフェースともいいます。

画面の表示形式や入力の方法、帳票のレイアウトなどのヒューマンインタフェースは、システムを使うユーザによっての使い方を大きく左右する部分です。

ヒューマンインタフェースの要件は次のように分類されます。

身体的適合性
人の身体と機器とが適合していること。手の大きさとマウスの大きさの適合などです。
頭脳的適合性
人の頭脳の情報処理と機器が適合していること。情報的適合性ともいいます。(例:上から下、左から右と言った情報の流れ)
時間的適合性
人の作業時間、休息時間、機械の応答待ち時間などが適合していること。人の疲労も関係します。
環境的適合性
照明、気温、騒音など、人の好む環境と適合していること。
運用的適合性
人が対話型システムを運用すること、および運用管理をすることに適合していること。

ヒューマンインタフェースを実現する技術には次のようなものがあります。

音声認識
人の話す音声言語を解析し、文字データとして取り出す。
画像認識
人の画像を解析して、それが何かを識別する。
動画解析
人の動画を解析して、それが何かを識別する。
非言語インタフェース
人の五感(視覚、聴覚、味覚、嗅覚、触覚)のうち、言語以外の触覚などを機器との入力又は出力に使う。
自然言語インタフェース
機器特有のコマンドなどではなく、人が日常的に使っている言語をインタフェースにする。
特徴抽出
前述の各種の処理において、解析や識別に必要な特徴をまず抽出する。

入力機能の設計

入力機能の設計では、「ユーザにとって分かりやすく、入力しやすい」ことが最も大切です。

図書館の図書検索システムのような、コンピュータに不慣れな人が使うことが多いシステムの場合は、キーボードを使った文字入力をできるだけなくし、メニューから選ぶ形式や、タッチパネルを使用した入力にするなどの配慮が必要です。

一方、キーボードに慣れたユーザ向けの入力画面である場合は、キーボードとマウスの操作が混在すると操作性が落ちるので、マウスの仕様を減らし、番号を入力して選ぶメニュー形式にするなど、効率よく入力できる機能設計が望まれます。

インタラクティブシステム

インタラクティブシステム(対話型システム)は、ユーザとコンピュータ等の機械とが、対話しながら作業を進めていくシステムのことです。人の出力が機器の入力になり、機器の出力が人の入力になるという関係です。

人もシステムの構成要素として考えると、機器の性能や機能はシステムの属性の一部に過ぎず、人の機能や性能も含めて、能率的な作業ができることが大切です。

機器側だけをシステムとして考えると、人間中心設計という方針が必要です。また、対話型システムの開発には、ユーザ操作の分析が必要です。

ユーザ操作の分析
  • 要件分析段階には、ユーザの従来の作業を分析したり、対話型システムにおける人の作業の部分や条件を分析したりします。
  • 試験段階には、開発された機器を用いてユーザに作業してもらい、それを分析して使いやすさを改善します。ユーザビリティテストがその例です。
ユーザビリティ

ユーザビリティは、対話型システムの特性の一つであり、次の特性のまとまりです。

  • 効果: ユーザの作業の結果が効果的である。
  • 効率: ユーザが作業を進める過程が効率的である。
  • 満足度: ユーザがイライラしたりせずに、気持ちよく作業が出来る。
アクセシビリティ

対話型システムの特性の一つであり、多様な性質を持つ人々の誰でもが、利用しやすいという性質です。特に、障がい者や高齢者でも利用しやすいことが代表的です。例えば、老眼の人のために文字サイズを大きくすることが挙げられます。

人に特有な性質の一つに、選択的知覚があります。人は自分の興味や経験をベースにして、好みの物事を選択的に知覚し、好みでない物事は知覚しにくいという傾向があります。選択的知覚を利用するインタフェースや弱点を補強するインタフェースが望まれます。

音声認識

音声認識は、人の話す音声言語を解析し、文字データとして取り出すことです。メニューを選択すること無しに、人が音声で機器に指示を出すことが、倉庫の扉の開閉やカーナビゲーションなどに用いられます。音声による個人認証は、セキュリティのためのインタフェース技術ともいえます。

画像認識

画像認識は、人の画像を解析して、それが何かを識別することです。例えば、人の視線を解析してカーソルを移動したり、人の笑顔を解析してカメラのシャッターを押す代わりにしたりすることができます。顔認証、指紋認証、虹彩認証などは、セキュリティのためのインタフェース技術ともいえます。

動画認識

動画認識は、人の動画を解析して、それが何かを識別することです。人のジェスチャーによって、機器へ処理を指示することなのです。

特徴抽出

特徴抽出とは、音声認識、画像認識、動画認識、非言語インタフェース、自然言語インタフェースなどの解析処理や識別処理の前半に、解析や識別に必要な特徴をまず抽出することです。画像認識であれば、人の顔の輪郭を抽出するようなエッジ検出などがその例です。

ノンバーバルインタフェース(非言語インタフェース)

非言語インタフェース(ノンバーバルインタフェース)とは、人の五感(視覚、聴覚、味覚、嗅覚、触覚)のうち、言語以外の触覚などを機器との入力または出力に使うことです。

例えば、医療教育用の端末は、人の手からの力をコンピュータへ入力したり、人体の反発を模擬した力をコンピュータから出力したりします。

自然言語インタフェース

自然言語インタフェースとは、機器特有のコマンドなどではなく、人が日常的に使っている言語をインタフェースにすることです。

例えば、音声認識において、「開け」等の操作用語に限定することなく、「ドアを開けてください」などの自由な文を許容したり、識別をすすめるためにコンピュータから日常語で質問したりするのが、自然言語インタフェースの例です。

 

GUI

この記事での学習内容 ITパスポート 基本情報 応用情報

グラフィックスを用いた視覚的な表示,ポインティングデバイスなどによる直感的な操作などGUI の特徴,GUI で使われる構成部品の特徴と役割,GUI 画面設計やシナリオなどを使用した設計の手順と留意事項を理解する。

用語例:ウィンドウ,アイコン,ラジオボタン(ラジオボックス),チェックボックス,リストボックス,プルダウンメニュー,ポップアップメニュー,テキストボックス

GUI(グラフィカルユーザインタフェース)

GUI(Graphical User Interface)とは、グラフィックを使って表された機能を、マウスで選んで操作できる視覚的なヒューマンインタフェースです。

機能が、直感的にわかりやすい「アイコン」などのシンボルを使って表示され、プログラムの起動などの基本的な操作をマウスを使ってできるので、キーボードに不慣れな初心者にも使いやすい操作環境です。

WindowsやMac OSなど、多くのOSがGUIを採用しています。

対して、キーボードでコマンドを入力しながら操作をするインタフェースのことをCUI(Character User Interface)といいます。

GUIの部品

GUIに対応するOSでは、ソフトウェアの画面設計に共通に利用できる、さまざまなGUI部品を提供しています。

チェックボックス
枠内にチェックを付けて選択肢を選ばせる部品です。同時に複数の選択肢を選ぶことができます。
ラジオボタン
円内に黒円をつけて選択肢を選ばせる部品です。複数の選択肢から一つだけを排他的に選ばせます。
リストボックス
リストとして表示される選択肢の一覧から選択できる部品です。
テキストボックス
自由記入形式でユーザがテキストを入力できる部品です。
プルダウンメニュー
メニューバーなどから選択肢のリストが垂れ下がるように表示されるメニューです。
ポップアップメニュー
右クリックなどで飛び出すように表示されるメニューです。

GUI画面設計の留意事項

GUI画面設計にあたっては、次のような点に留意します。

統一性
用語、マウスやキーボードの使い方、メッセージなどを統一する。画面レイアウトを画面間で統一する。
そのシステム内での統一性ももちろん、動作プラットフォームでの一般的な振る舞いに合わせるという意味での統一性も重要。
省力化
省略値(デフォルト値)や前回の選択肢の保存などにより、操作の手間を減らす工夫をする。入力時の適切な項目間のカーソル移動や日本語入力のON/OFFの自動化など。
ユーザの多様性
ユーザの多様性に対して、頻繁に行う操作には、マウスとキーボードの両方の手段を提供する。目の不自由な人や視力の弱い人にも配慮することや、特にWebページではPC以外からの閲覧も考慮するなど。
例外処理
途中での中断やご操作の際の取り消し(Undo機能)などの、よくある例外状況を許容する手段を提供する。
エラーメッセージはユーザを威嚇する表現を避けて、状況の説明、その原因、および次にすべき行為を案内するようにする。

ユーザの多様性を考慮すれば、キーボードの操作よりも、マウスによる操作が常に操作性が良いとは限りません。ユーザには個人差がありますし、同じユーザでもなれてくるとニーズが変わってくるものです。そのために、例えば使用頻度の高い操作に関しては、マウスとキーボードの両方のインタフェースを用意するようにします。

例えば、地図閲覧ソフトウェアを例にすると、特定の町の地図を表示する操作の場合、マウスだけを操作して、全国地図から出発し、近畿地方、京都府、京都市、中京区と絞り込んでいくのが典型的なGUIです。しかし、「住所欄」を設けてキーボードで「京都市中京区」と入力すると一回の操作で町の地図を表示できます。このような形でマウスとキーボード両方のインタフェースを用意すると良いでしょう。

 

インタフェース設計

情報処理技術者試験での学習内容

【応用情報・基本情報】
・画面設計,帳票設計,コード設計の考え方,手順,手法を修得し,応用する。
・ユニバーサルデザインの考え方を応用した望ましいインタフェースを修得し,応用する。

【ITパスポート】
・インタフェース設計の考え方を理解する。

(1)画面設計・帳票設計 ITパスポート 基本情報 応用情報

1.画面設計

画面設計の考え方,手順,手法,代表的な入力チェックの方法を理解する。また,入出力項目とデータベースの対応,入出力項目の処理の対応を理解する。

用語例:画面構成,情報の検索,情報の関係性,利用者の用語,情報提示ストーリ,ストーリボード,部分送信,ニューメリックチェック,フォーマットチェック,リミットチェック,組合せチェック,照合チェック,バランスチェック,チェックキャラクタ,穴埋め方式,メニューインプット方式,フォーマットエラー,論理エラー,シーケンスエラー

2.帳票設計

帳票設計の考え方,手順,手法を理解する。また,プリンタの種類やコピー方法などの装置制約事項と帳票設計の関係,フォームオーバレイや専用の事前印刷用紙への出力,入出力項目とデータベースの対応,入出力項目と処理の対応を理解する。

用語例:出力特性,入力特性

(2)コード設計 基本情報 応用情報

コードの種類と特徴,利用目的や適用分野に合わせたコード設計の考え方,手順,手法を理解する。

用語例:順番コード,区分コード(分類コード),桁別コード,表意コード,合成コード

(3)Web デザイン ITパスポート 基本情報 応用情報

Web デザインにおけるユーザビリティの考え方,ユーザビリティを向上させるための手法,スタイルシートの利用によるデザイン全体の統一や,複数種類のWeb ブラウザ対応などを考慮してWeb デザインすることを理解する。また,ユーザビリティに関する国際規格が存在すること,ユーザビリティ評価手法,Web サイトのナビゲーションの手法を理解する。

用語例:フレーム,空間近接原理,アフォーダンス,サイト内検索機能,ISO 9241,サイトマップ,クロスブラウザ,プログレッシブエンハンスメント

(4)人間中心設計 基本情報 応用情報

ユーザビリティの向上を目的とした,人間中心設計の考え方,プロセスを理解する。

用語例:ISO 13407,使用状況の理解と明示,利用者と組織の要求事項の明示,設計による解決策の作成,要求事項に基づく設計の評価

(5)ユニバーサルデザイン ITパスポート 基本情報 応用情報

ユニバーサルデザインの7 原則の考え方を理解する。また,情報技術分野においても,イラストによる説明,音声読み上げ,Undo(取消)機能など,ユニバーサルデザインの考え方を応用したインタフェースのあり方,設計手法を理解する。

用語例:WAI(Web Accessibility Initiative),WCAG 1.0(Web Content Accessibility Guidelines 1.0)

(6)ユーザビリティ評価 基本情報 応用情報

ユーザビリティ評価の考え方と手法を理解する。

用語例:ヒューリスティック評価

 

画面設計・帳票設計

この記事での学習内容 ITパスポート 基本情報 応用情報

  • 画面設計の考え方,手順,手法,代表的な入力チェックの方法を理解する。また,入出力項目とデータベースの対応,入出力項目の処理の対応を理解する。
  • 帳票設計の考え方,手順,手法を理解する。また,プリンタの種類やコピー方法などの装置制約事項と帳票設計の関係,フォームオーバレイや専用の事前印刷用紙への出力,入出力項目とデータベースの対応,入出力項目と処理の対応を理解する。

用語例:画面構成,情報の検索,情報の関係性,利用者の用語,情報提示ストーリ,ストーリボード,部分送信,ニューメリックチェック,フォーマットチェック,リミットチェック,組合せチェック,照合チェック,バランスチェック,チェックキャラクタ,穴埋め方式,メニューインプット方式,フォーマットエラー,論理エラー,シーケンスエラー、出力特性,入力特性

画面設計

対話型システムの開発プロセスには、画面設計が加わります。また、画面設計より前の開発フェーズには、画面設計に必要な情報の提供が加わります。また、画面設計より後の開発フェーズには、画面に関わるレビュー、テストなどの作業項目やチェックリストが加わります。

画面設計は次の手順で進めます。

  1. 画面全体像の作成:画面群の漏れやダブリがないように、全体構成を描く。
  2. 画面設計の標準化:既存の標準を入手したり、社内や当該システムの標準を制定したりする。
  3. 画面フローの設計:ユーザの操作を考慮し、画面間の遷移を決定する。
  4. 表現方法の検討:GUI等の技術を適材適所で活用することを考慮して、表現方法や対話方法を検討する。
  5. 画面レイアウトの設計:標準に沿って、各画面のレイアウトを設計する。

画面や帳票のレイアウト

画面のレイアウト設計では、入力の順序が概ね画面の左上から右下へ流れていくように項目を配置すると入力の流れが自然になります。

帳票のレイアウト設計では、関連する項目同士を近くに配置する、余分な情報は省いて必要最小限の情報に絞り込むなどの工夫をすると、見やすいレイアウトになります。

画面や帳票類が複数あるときは、タイトルの位置やページ番号のデザインなどは統一します。

固定的な内容に限られる入力項目は、メニューからの選択形式にしておくと、入力の手間が省けると同時に、不足の入力値に対するエラーチェックの処理などが不要になるという、開発する上でのメリットもあります。

*例えば、日時を入力する欄があるとすれば、月は1~12しかありえないし、曜日も7パターン。それらをユーザの任意入力項目にするよりは、メニューからの選択としたほうが効率的です。

入力チェック

入力チェックとは、画面から入力されたデータが制約条件に合致しているかどうかをチェックすることです。

以下のような入力チェックの中から、設計フェーズにおいて適切なものを選択します。

照合チェック
データが所定の集合に存在するかをチェックする。
重複チェック
データの重複をチェックする。
ニューメリックチェック
データが数字であるかチェックする。複数桁の数字列という条件であれば、数字の並びになっているかどうかをチェックします。(例:商品の購入数)
フォーマットチェック
データの桁数や構文規則などの書式をチェックする。
例えば、メールアドレスの場合、使用できない特殊記号があるので、それが混入していないかどうかチェックします。
リミットチェック
限界値を超えていないかチェックする。
例えば、商品の購入数であれば、在庫数を超えていないかをチェックします。
レンジチェック
下限値から上限値までの範囲から外れていないかチェックする。
例えば、「月」を入力する場合、1~12の数値になっていることをチェックします。
カウントチェック
データ群の件数をチェックする。
シーケンスチェック
データ群が順番に並んでいるかをチェックする。
バランスチェック
データ群が所定のバランスを保っているかをチェックする。
例えば、仕訳データの借方と貸方のように最終的な合計が一致すべきデータを別々に集計して、両者が一致することをチェックします。

帳票設計

帳票設計は以下の手順で進めます。

  1. 全体像の設計:帳票群の漏れやダブリがないように全体構成を描く
  2. 設計の標準化:既存の標準を入手したり、社内や当該システムの標準を制定したりする。
  3. 媒体の設計:利用場面を考慮し、適切な媒体を選択する(紙なのか電子データなのか)
  4. 表現方法の検討:見やすさ、わかりやすさを考慮して、表現方法を検討する。
  5. レイアウトの設計:標準に沿って、各帳票のレイアウトを検討する。

帳票のレイアウト設計

帳票のレイアウト設計では、関連する項目同士を近くに配置する、余分な情報は省いて必要最小限の情報に絞り込むなどの工夫をすると、見やすいレイアウトになります。

帳票類が複数あるときは、タイトルの位置やページ番号のデザインなどは統一します。

コード設計

この記事での学習内容 基本情報 応用情報

コードの種類と特徴,利用目的や適用分野に合わせたコード設計の考え方,手順,手法を理解する。

用語例:順番コード,区分コード(分類コード),桁別コード,表意コード,合成コード

コード番号

商品名のように、内容が固定的ではあるが、メニューにするには選択肢の数が多すぎる、という入力項目は、コード番号に置き換えるという方法があります。

例えば、都道府県名について、北海道が「01」~沖縄県が「47」といった番号を決めておけば、文字を入力する代わりに番号での入力が出来るようになります。

コード化するときには、選択肢の数に十分足るだけのコードの桁数を持たせて設計する必要があります。例えば都道府県なら全部で47通りであり、将来的に増えることがあったとしても、最大で99まで見ておけば十分、と判断するのであれば2桁のコードで事足ります。このように、コードの桁数は、現状の数だけでなく、将来増えるであろう数も見越して決定します。

チェックデジット

チェックデジットは数字コードの誤り検出法の一つで、コードの各桁の数字を使って一定の計算をし、1桁の数字を得てそれをコードの末尾に加える方法です。チェックデジットを用いるコードは、総桁数が本来の長さより1桁多くなります。

例えば、本来3桁の長さの数値コードに対し、コードの桁の先頭から順に1倍、2倍、3倍してその合計値を求め、合計値の1の位の数をチェックデジットとすることにします。
このとき「357」というコードであれば、3×1+5×2+7×3=34なので、チェックデジットは「4」であり、コードは「3574」となります。

コード入力時にも同じ計算を行い、入力されたチェックデジットの値が、前3桁の数から求めた計算結果と一致するかどうかを確認することで、入力ミスをある程度発見できます。

順番コード

順番コードは、項目が並んだ順序の番号を表すコードです。JIS(日本工業規格)の都道府県コードは北海道から沖縄県まで、ほぼ北から南へという位置の順番をそのままコードにしたものです。地図が苦手な人でも、順番をヒントにして、地図上の都道府県を探し当てやすいという特徴があります。

また、入力・作成・出力などの処理した順番のとおりに順番コードを付与する方式は、最近処理された項目が次に処理される確率が高い場合には、効率的なのが特徴です。

区分コード(分類コード)

区分コード(分類コード)は、項目の類似性に基づいた分類を区別するように付与したコードです。1000番台、2000番台というように、分類を数値で区別することもあります。またそれぞれの分類の中では順番コードを付加することがあります。

区分コードは、類似する項目が近くにあり、探し当てやすいことや、処理するプログラムや人の分業がしやすいという特徴があります。

桁別コード

桁別コードは、コードの桁ごとに意味をもたせたコードです。学生番号の例では、先頭4方が入学年度、次の1桁が学科、末尾4桁が学生の通し番号を表す、といった付与の仕方です。

桁別コードは、複数の欄は区切り記号を要することなく、一つのデータで複数種類の意味を扱えるのが特徴です。

表意コード

表意コードは、項目の意味を表すコードです。例えば国際標準化機構の定めるISO3166-1の3桁の国名コードでは、「JPN」は日本、「USA」が米国、「RUS」がロシアで、各国の英語表記を短縮したものになっています。

表意コードは専門家でなくても意味を理解しやすいことが特徴です。商品コードにも、商品種類名の略字による表意コードが用いられることが多いです。

合成コード

合成コードは、各種のコードを組み合わせたコードです。例えば、自動車登録番号は、地域を表す表意コード、普通乗用車や小型乗用車などの種類を表す区分コードなどを組み合わせた合成コードです。

Web デザイン

この記事での学習内容 ITパスポート 基本情報 応用情報

Web デザインにおけるユーザビリティの考え方,ユーザビリティを向上させるための手法,スタイルシートの利用によるデザイン全体の統一や,複数種類のWeb ブラウザ対応などを考慮してWeb デザインすることを理解する。また,ユーザビリティに関する国際規格が存在すること,ユーザビリティ評価手法,Web サイトのナビゲーションの手法を理解する。

用語例:フレーム,空間近接原理,アフォーダンス,サイト内検索機能,ISO 9241,サイトマップ,クロスブラウザ,プログレッシブエンハンスメント

Webデザイン

多くの企業や団体などが、Webサイトを構築し、インターネット上でWebページを公開しています。

Webページを公開すると、最新の情報を多くの人に発信することができますが、ページが適切にデザインされていなければ効果が上がりません。

インデックスの分類やメニュー
ユーザの見たい情報の在り処が、ひと目で分かるようにします。
サイト全体の内容を把握できるようなインデックスやメニューを用意し、トップページから見られるようにしておきます。
ページレイアウト、デザインの統一性
ユーザがどのページを見ても迷うことなく、どこに何があるか類推できるようにします。
項目のレイアウトやボタンなどのパーツの使い方を統一し、リンクの付け方などにも共通ルールを作っておきます。
画面の構成、画面遷移
ユーザが見たい情報まで素早くたどりつけるようにします。
クリックによる画面の切り替えやドラッグによる移動、前の画面に戻す操作がなるべく少なくて済むような画面遷移を用意します。
ユーザへの配慮
どんな環境からでも快適に利用できるようにします。
データ量は抑えて、動画再生などの使用は必要最小限にします。
また、色々なユーザに使ってもらうために、ユニバーサルデザインに配慮します。

スタイルシート

Webページを作成する時、スタイルシート(CSS:Cascading Style Sheets)を用意すると、レイアウトの指示をページ毎に記述しないで済むようになります。

CSSは、HTML文書の段落の配置や文字の色といったレイアウト情報だけをまとめてスタイルシートとして定義するファイルです。HTML文書とCSSファイルに関連付けておけば、Webページのレイアウトを統一できます。また、CSSを修正すれば、それを参照する全てのWebページのレイアウトが変更できます。

CSSの規格はW3Cで標準化されています。

画面遷移図

どの画面からどの画面へ移ることが出来るかという流れを、画面遷移といいます。

Webサイトなどを設計するときには、画面遷移図を作成して画面の遷移関係を整理します。

画面遷移図では、各画面を円や四角形、直線で表して画面名を記入し、その間を矢印で結んで、画面間の移動関係を図にします。

画面を円や四角形で表す場合、画面の数だけ円や四角形を描き、図形内に画面名を記入して、その間の移動の有無と方向を、図形を結ぶ矢印で示します。

画面を直線で表す場合には、画面の数だけ直線を引いて横に画面名を記入して、画面間の移動の有無や方向を。直線間を結ぶ矢印で示します。

円や四角形、直線のいずれを用いる場合でも、図中の1本の矢印は、画面操作上のクリックやキー入力といった一つのアクションを指しています。

人間中心設計

この記事での学習内容 基本情報 応用情報

ユーザビリティの向上を目的とした,人間中心設計の考え方,プロセスを理解する。

用語例:ISO 13407,使用状況の理解と明示,利用者と組織の要求事項の明示,設計による解決策の作成,要求事項に基づく設計の評価

ユーザビリティとアクセシビリティ

ユーザビリティとは、ユーザにとっての「使いやすさ」「自由度や柔軟性の高さ」のことです。

アクセシビリティとは「すべての人が同じように利用できる」ことです。

不特定多数のユーザ向けに作るWebサイトは、高齢者や障がい者、外国人など様々な立場の人が利用できるように配慮して設計する必要があります。

例えば、ブラウザの音声読み上げ機能を利用する人のためには、意味を色の区別だけで表現せず文字説明を添える、などが有効です。

*音声や手書き文字などの限られた手段でしか情報のやり取りができなくても、情報機器を活用できる環境のことを、情報バリアフリーといいます。

ISO 13407

ISO13407は、国際標準化機構のISOによって、1999年に制定された「Ergonomics-Human-centerd design processes for interactive systems」という規格です。
日本工業規格のJIS Z8530「人間工学-インタラクティブシステムの人間中心設計プロセス」として和訳されました。

ISO13407はISO9241シリーズに統合されて、ISO9241-210として、2010年に制定されました。

 

ユニバーサルデザイン

この記事での学習内容 ITパスポート 基本情報 応用情報

ユニバーサルデザインの7 原則の考え方を理解する。また,情報技術分野においても,イラストによる説明,音声読み上げ,Undo(取消)機能など,ユニバーサルデザインの考え方を応用したインタフェースのあり方,設計手法を理解する。

用語例:WAI(Web Accessibility Initiative),WCAG 1.0(Web Content Accessibility Guidelines 1.0)

ユニバーサルデザイン

ユニバーサルデザインとは、製品や建物などを設計・計画する時に、多くの人が年齢や国籍、障がいの有無などの違いにかかわらず快適に使えるように最初からしておく、という考え方です。ユーザビリティとアクセシビリティを兼ね備えたデザインといえます。

配慮のないWebデザインだと、見たくても見られない人が出てきてしまいます。不特定多数の人がアクセスするWebのデザインにおいては、情報格差(デジタルデバイド)を無くすためにもユニバーサルデザインの考え方が重要です。

以下に、ユニバーサルデザインの7原則を示します。

  1. どんな人でも公平に使える
  2. 使う上で自由度が高い
  3. 使い方が簡単で、すぐに理解できる
  4. 必要な情報がすぐに分かる
  5. うっかりミスが事故や危険につながらない
  6. 身体への負担がかかりづらい(弱い力でも使える)
  7. 利用するのに十分な大きさと空間を確保する

WAI(Web Accessibility Initiative)

ワールドワイドウェブコンソーシアム(W3C)のWAIという組織は、ウェブのアクセシビリティを向上することを目的としている組織です。

WCAG 1.0(Web Content Accessibility Guidelines 1.0)

WCAG 1.0は、W3Cのウェブのアクセシビリティのガイドラインです。読者として、ウェブサイト設計者、ウェブコンテンツ制作者、およびオーサリングツールの開発者を想定しています。

 

ユーザビリティ評価

この記事での学習内容 基本情報 応用情報

ユーザビリティ評価の考え方と手法を理解する。

用語例:ヒューリスティック評価

ユーザビリティ評価

ユーザビリティとは、ユーザにとっての使いやすさの度合いです。「有効さ」「効率」「満足度」の3つの概念で表されます。

ユーザビリティを評価するための手法には、以下の様なものがあります。

ユーザビリティテスト
実際にユーザに使ってもらいながら、問題点を洗い出します。
ヒューリスティック評価
ユーザビリティの専門家が、これまでの経験に基づいて評価を行います。
チェックリスト評価
ユーザビリティ基準表を使用し、基準を満たしているかどうかをチェックしていきます。