「インタフェース設計」カテゴリーアーカイブ

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

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

インタフェース設計

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

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

【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つの概念で表されます。

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

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