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

# 画面設計とWebデザイン
## 文字フォント
### ビットマップフォント
```決められた数のドットパターン（点の集まり）```によって、作られた文字フォント。
大きく拡大すると```ジャギー（ギザギザの線）```が目立つ

### アウトラインフォント
文字の```輪郭線を円と線の情報（ベクトルデータ）```によって持つフォント。
```拡大・縮小しても文字が崩れず```に表示できる。

## Web画面をわかりやすくするための技法
### フレーム
Web画面のレイアウトをナビ、メインコンテンツ、ガイドやメニューなどの形をにブロック化した場合の枠取り

### ナビゲーション
利用者がスムーズに検索や移動を行ったり、現在の位置を知るための情報やメッセージのこと
また
現在の位置を知るための情報とは階層を把握する情報のことこれを```パンくずリスト```という。

### チャンク
Webページを見やすくしたり、直感的にわかりやすくするためのまとまりのこと。

# GUIの部品
アイコンやボタン、メニューを使って利用者が直感的に操作できるようなヒューマンインタフェース

テキストボックス、ラジオボタン、チェックボックス、リストボックス、プルダウンメニュー(メニューバーから垂れ下がるように表示）を使う

# ユーザビリティの評価
### ヒューリスティック評価法
```数人の専門家が行う```手法。
```ソフトウェア製品の仕様書が設計ガイドライン沿っている```かを判定し、改良点をリストアップしていく。

### ヒューリスティック評価
* ```一連のユーザビリティガイドラインやベストプラクティスに照らして製品全体を評価```することにより、弱点や改善できそうな点を特定しやすくするものだが、```システムに対するユーザーの視点や反応を掘り下げることはしない```。
#### 出典 
https://u-site.jp/alertbox/cognitive-walkthroughs

* ```専門家による知見に基づいて、使いやすさの観点からチェック```を行い、抽出された問題点とその改善案について指摘を行なう評価手法です。
ユーザビリティテストと比べて評価範囲は柔軟に対応でき、```評価期間が短く、比較的コストがかからない```ことが特長です。

#### 出典
https://www.iid.co.jp/service/tool/tool24.html#:~:text=%E3%83%92%E3%83%A5%E3%83%BC%E3%83%AA%E3%82%B9%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E8%A9%95%E4%BE%A1%E3%81%A8%E3%81%AF,%E3%81%8B%E3%81%8B%E3%82%89%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E3%81%8C%E7%89%B9%E9%95%B7%E3%81%A7%E3%81%99%E3%80%82

### ユーザビリティテスト
ソフトウェア製品の試作品などを```ユーザに操作```してもらい、```間違ったり混乱したりした箇所を見つけ出し、その原因を分析```していく。

### 思考発話法ユーザビリティテストとは
思考発話法ユーザビリティテストとは、ユーザにタスク（課題）を提示し、その実行過程において考えていることを話しながら操作してもらう手法です。
ユーザの行動と発話から、インターフェース上のどの部分に問題があるのか、なぜその問題が起きたのかを詳細に把握できます。

#### 利用例・向いているテーマ
組み込み系ソフトウェア、Webサイトのユーザビリティ検証
組み込み系ソフトウェア、WebサイトのUIの設計

#### 出典
https://www.iid.co.jp/service/tool/tool31.html#:~:text=%E6%80%9D%E8%80%83%E7%99%BA%E8%A9%B1%E6%B3%95%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E3%83%86%E3%82%B9%E3%83%88%E3%81%A8%E3%81%AF%E3%80%81%E3%83%A6%E3%83%BC%E3%82%B6%E3%81%AB%E3%82%BF%E3%82%B9%E3%82%AF,%E8%A9%B3%E7%B4%B0%E3%81%AB%E6%8A%8A%E6%8F%A1%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82

### 回顧法とは？
後からユーザに質問して振り返る方法

### 認知的ウォークスルーとは
* ```ユーザーの行動を探査学習のモデル（目標設定→探査→選択→評価）に従い、課題達成まで問題がないかの探索を繰り返す```手法です。

#### 利用例・向いているテーマ
情報構造やラベリングの視点も含めてチェックすることが可能なため、開発サイクルのどのタイミングでも活用することが可能です。

企画段階：現状のUI（ユーザーインターフェース）の問題点の把握やユーザー要求の抽出
設計段階：ユーザーが理解しにくい、仕様書や画面遷移図、プロトタイプでも評価が可能

#### 出典
https://www.iid.co.jp/service/tool/tool24.html#:~:text=%E8%AA%8D%E7%9F%A5%E7%9A%84%E3%82%A6%E3%82%A9%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%AB%E3%83%BC%E3%81%A8,%E6%8E%A2%E7%B4%A2%E3%82%92%E7%B9%B0%E3%82%8A%E8%BF%94%E3%81%99%E6%89%8B%E6%B3%95%E3%81%A7%E3%81%99%E3%80%82&text=%E3%81%BE%E3%81%9F%E3%80%81%E3%83%92%E3%83%A5%E3%83%BC%E3%83%AA%E3%82%B9%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E8%A9%95%E4%BE%A1%E3%81%A7%E6%8A%BD%E5%87%BA,%E3%81%A8%E3%81%AF%E9%99%90%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82

* 機能横断的なレビュアーチームがタスクフローを```ステップごとに実行しながら検証し、一連の所定の質問に答える```ことで、新規ユーザーにとって```課題になりそうなインタフェースのポイントを特定```することを目的としている。
#### 出典
https://u-site.jp/alertbox/cognitive-walkthroughs

#### ユーザビリティとは？
冒頭でも紹介したように、ユーザビリティは一言で言うと```「使い勝手」や「使いやすさ」```を意味します。

厳密には、国際標準化機構（ISO）にて以下のように定義されています。

「特定のユーザーが特定の利用状況において、システム、製品又はサービスを利用する際に、効果、効率及び満足を伴って特定の目標を達成する度合い。」
### 出典
https://gmotech.jp/semlabo/seo/blog/words_userbility/#:~:text=%E5%86%92%E9%A0%AD%E3%81%A7%E3%82%82%E7%B4%B9%E4%BB%8B%E3%81%97%E3%81%9F%E3%82%88%E3%81%86,%E7%9B%AE%E6%A8%99%E3%82%92%E9%81%94%E6%88%90%E3%81%99%E3%82%8B%E5%BA%A6%E5%90%88%E3%81%84%E3%80%82%E3%80%8D

# 出典 
https://gihyo.jp/book/2022/978-4-297-12375-8