ユーザーインタフェース
システムを使う人が迷わず、まちがえずに操作できるかは、画面の部品の選び方と入力の確かめ方で決まります。この単元では、UIの技術、UXデザイン、画面・帳票・コードの設計、ユニバーサルデザインと評価の方法を扱います。
要点
ユーザーインタフェース技術
- 情報アーキテクチャ
- 情報を五十音やカテゴリで分け（組織化）、階層やタグで構造にして探しやすくする。分かりやすいラベルとナビゲーションを付ける。
- 人が一度に覚えやすい量にまとめた単位がチャンク。電話番号を3〜4桁ずつ区切るのが例。
- ユーザーインタフェース（UI）
- 使いやすさがユーザビリティ。高齢者や障害のある人も含めて使えることがアクセシビリティ。
- 「ここを押せる」と見て分かる手がかりがシグニファイア。人が必要な情報だけを選んで受け取ることを選択的知覚という。
- 声で操作するVUI、身ぶりや触れる操作で使うNUI。画面ではタップ・スワイプ・フリック・ピンチなどのマルチタッチ操作を使う。
- 音声認識や画像認識は、データから特徴を取り出して（特徴抽出）判定する。
- GUI
- 1つだけ選ぶラジオボタン、いくつでも選べるチェックボックス、オンとオフを切り替えるトグルボタン、自由に書くテキストボックス。
- 一覧から選ぶリストボックス、押すと開くプルダウンメニュー、見出しで開け閉めするアコーディオン。
- ポインタを重ねたときの変化がホバー（ロールオーバー）。重ねると短い説明が出るのがツールチップ。
UX/UIデザイン
- UXデザイン
- 使う前から後までの体験全体を設計する。UXデザインの五段階モデルは、戦略→要件→構造→骨格→表層の順に具体化する。
- 情報デザイン
- デザインの原則は近接・整列・反復・対比。データを図や絵にまとめて伝えるのがインフォグラフィック。
- 書体・大きさ・行間を整えるのがタイポグラフィ。完成のイメージを写真や色見本で集めたのがムードボード。
- 画面設計
- 関係する項目を近くに置き、入力する順に並べる。誤った入力は、その場で確かめて知らせる。
- 数字だけか見るニューメリックチェック、桁数や形式のフォーマットチェック、範囲内かのリミットチェック、項目どうしの矛盾を見る組み合わせチェック。
- 登録済みのデータと突き合わせる照合チェック、貸方と借方などの合計が一致するか見るバランスチェック、検査用の数字で打ち間違いを見つけるチェックキャラクター（チェックディジット）。
- 帳票設計
- 何に使うかから項目と配置を決め、見出しや単位をそろえる。決まった様式とデータを重ねて印刷するのがフォームオーバーレイ。
- コード設計
- 連番の順番コード、番号の範囲で分ける区分コード、桁ごとに意味を持たせる桁別コード、見て意味が分かる表意コード、それらを組み合わせた合成コード。
- 「入学年＋組＋番号」の生徒番号は桁別コード。将来の件数の増加を見込んで桁数を決める。
- Webデザイン
- 見た目はスタイルシートにまとめてページ全体をそろえる。どのブラウザでも同じように使えるようにするのがクロスブラウザ。
- メディアクエリで画面の幅に合わせて配置を変えるのがレスポンシブWebデザイン。基本の機能を全員に出し、対応する環境にだけ機能を足すのがプログレッシブエンハンスメント。
- 骨組みを線で描くワイヤーフレーム、迷わない言葉を選ぶUXライティング、サイト内検索機能で探しやすくする。
- 人間中心設計
- 利用者と使う状況を理解し、要求を明らかにし、設計し、評価する流れを繰り返す。規格はJIS Z 8530（ISO 9241-210）。
- ユニバーサルデザイン
- 年齢・文化・障害の有無にかかわらず、できるだけ多くの人が使えるように作る。読みやすいUDフォント、言葉に頼らず伝わるピクトグラム。
- Webの基準はWAIが作るWCAG、日本の規格はJIS X 8341。
- ユーザビリティ評価
- 専門家が経験則に照らして問題を探すのがヒューリスティック評価。実際の利用者に操作してもらって観察するのがユーザビリティテスト。
さわって確かめる
入力のまちがいを見つける仕組みと、まちがえにくい部品の選び方を、次の2つで試します。
1. チェックディジットで打ち間違いを見つける
本体「452013」のチェックディジットを求め、受け取ったコードの1桁を変えて、誤りが見つかるか確かめよう。
2. 場面に合う入力部品を選ぶ
5つの場面それぞれで、利用者がいちばん迷わず、まちがえにくい部品を選ぼう。
3問チェック
最初に選んだ答えで採点します。全問正解で、この単元に「済み」の印が付きます。
-
本体「4731」に、モジュラス10・ウェイト3・1（右の桁から3、1、3、1と掛ける）でチェックディジットを付ける。チェックディジットはいくつか。チェックディジットは「10−(合計を10で割った余り)」とし、余りが0なら0とする。
- 1
- 5
- 9
- 31
答えと解説
正解はウ。右から 1×3＋3×1＋7×3＋4×1＝3＋3＋21＋4＝31。31を10で割った余りは1なので、10−1＝9。1は余りをそのまま答えた値（左の桁から3、1と掛けても1になる）、5はウェイトを掛けずに足した値（合計15）から求めた値、31は合計そのもの。
-
入力画面で「月」の欄に 13 と入れたとき、エラーとして見つけられる入力チェックはどれか。
- ニューメリックチェック
- フォーマットチェック
- リミットチェック
- 照合チェック
答えと解説
正解はウ。リミットチェックは値が決められた範囲（ここでは1〜12）に入っているかを見る。13は数字だけでできているのでニューメリックチェックは通り、2桁という形式にも合うのでフォーマットチェックも通る。照合チェックは登録済みのデータ（社員番号の一覧など）と突き合わせる方法。
-
利用者を集めずに、専門家が使いやすさの経験則に照らして画面を点検し、問題点を挙げる評価の方法はどれか。
- ヒューリスティック評価
- ユーザビリティテスト
- ワイヤーフレーム
- ムードボード
答えと解説
正解はア。ヒューリスティック評価は専門家が経験則に照らして点検する。ユーザビリティテストは実際の利用者に操作してもらう方法なので、利用者を集める。ワイヤーフレームは画面の骨組みの図、ムードボードはイメージを集めたもので、どちらも評価の方法ではない。