概要

情報技術の基礎として理解しておきたい ヒューマンインターフェース について、ユーザーインターフェース、入力支援、画面設計、アクセシビリティを整理する。

領収書の検索や入力フォームを例に利用者が目的を達成できるかを評価する。エラーの説明とキーボード操作を見直し、見た目の印象を具体的な操作の改善へつなげる。

この記事の構成

• ヒューマンインターフェース技術
  完了率と所要時間を分け、利用者が迷う場所から改善点を探す。
• ユーザーインターフェース
  利用者とコンピューター間の情報を受け渡す仕組みのことで、ユーザーインターフェースの代表的な設計方針として次のヒューリスティックスがある。
• インターフェース設計
  必須項目とキーボード操作を例に伝達手段と操作の完結性を確認。

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

ヒューマンインターフェース技術とは利用者がシステムへ情報を伝える手段（インプット）とシステムが利用者に情報を伝える手段（アウトプット）を利用者側が使いやすい形で実現する技術のこと。

※ 代表例として音声認識、画像認識、動画解析、非言語インタフェース、自然言語インタフェースなどがある。

また、利用者側へ配慮した設計では以下のインフォメーションアーキテクチャとアクセシビリティが重要となる。

• インフォメーションアーキテクチャ
  情報が伝わりやすく、探しやすいように情報構造を設計し表現する技術のこと。 Webサイトの設計においては以下3つの要素がある。

  • サイト構造
    サイト構成を分類した階層構造で表現したものを指し、サイト構造をページで表現したサイトマップなどがある。

  • ナビゲーション
    Webサイトにおいて利用者が求める情報を探しやすいよう案内する機能（仕組み）を指し、メニュー、パンくずリスト、ページネーションなどがある。

  • ラベル
    メニューやボタンなどのオペレーション単位に関連付けされた名称を指し、利用者にとって分かりやすい名称が使用される。

• アクセシビリティ
  高齢者や障害者を含む多様な利用者がサービスや情報を利用できるようにする度合いを指す。

  ※ アクセシビリティの向上例としては、画像に代替テキストを設定してスクリーンリーダーで内容を伝えられるようにすることや、必須入力項目を色だけで区別せず「必須」という文字でも明記することなどがある。

• 使いやすさを目的の操作ができたかで確かめる
  仮に10人へ「過去の注文を探して領収書を表示する」という同じ課題を依頼し、8人が完了、2人が途中で断念したとする。完了率は80%であり、完了した8人の所要時間が短くても、残り2人の問題は消えない。

  時間だけでなく、どの画面で迷ったか、何を押そうとしたかも記録する。例えば「各種情報」の下で領収書を探せないなら、「注文履歴」のように利用者が目的から推測できる分類を検討できる。見た目の好みと目的を達成できるかの評価を分けると、修正箇所を具体的に決められる。

ユーザーインターフェース

利用者とコンピューター間の情報を受け渡す仕組みのことで、ユーザーインターフェースの代表的な設計方針として次のヒューリスティックスがある。

• ヒューリスティックス
  ヤコブ・ニールセンが提唱したインターフェースの問題点を見つけるための代表的なユーザビリティ原則で、下記の \(10\) ヵ条がある。
  ※ 個別製品の具体的な設計手順ではなく、評価時の判断基準として用いられる。

  1. システム状態の視認性
     ユーザーに現在のシステム状態を明確に伝え、要求のフィードバックを簡潔かつ早く提示すること。

  2. システムと現実世界の一致
     言葉やシンボル、概念などの情報は全てのユーザー層に馴染みのある表現であること。

  3. ユーザーの主導権と自由
     ユーザーの誤操作等でプロセスを変更したい場合、プロセスを戻す機能やプロセスを中断する非常口となる機能を設け、ユーザーに主導権と自由を持たせること。

  4. 一貫性と標準
     業界の慣例的なプラットフォームに従わず一貫性のない言葉や表現によって、ユーザーに学習負荷を与えたり疑問を持たせないこと。

  5. エラーの予防
     エラーが起きやすい条件を取り除き、必要に応じて確認を求めるなど、問題の発生を未然に防ぐこと。

  6. 想起より再認
     選択肢や操作対象を見える状態にし、ユーザーが記憶から思い出さなくても認識できるようにすること。

  7. 柔軟性と効率性
     ユーザーの利用用途に合わせ作業が効率化できるようショートカットなどのカスタマイズを設け、柔軟性を持たせること。

  8. 美的で最小限の設計
     インターフェースから関連性の少ない情報を排除し、本質的な部分に焦点を当てたコンテンツやビジュアルデザインとなる設計にすること。

  9. ユーザーによるエラーの認識・診断・回復のサポート
     エラーメッセージは問題をわかりやすいシンボルや言葉で正確に表現し、解決策を建設的に提案できていること。

  10. ヘルプとドキュメンテーション
      ヘルプとドキュメントの内容は検索しやすくユーザーの目的遂行に沿う具体的な手順が簡潔に示されていること。

• ユーザビリティ評価
  ユーザーにとってシステムの使いやすさを表す度合いを指し、有効さ、効率、満足度の \(3\) つの観点で表す。

  ユーザビリティの評価方法として上記のヒューリスティックスの原則を用いたヒューリスティック評価をはじめ、以下の種類がある。

  • ヒューリスティックス評価
    上記ヒューリスティックスの原則 \(10\) ヵ条を基準に、ユーザビリティの有識者がインターフェースを評価する方法。
    ※ UX（User Experience）は製品やサービスの利用を通じて得られる利用者体験を指す。

  • チェックリスト評価
    ユーザビリティ基準表に基づきその基準を満たしているかチェックする評価方法。

  • ユーザビリティテスト
    ユーザー視点でユーザビリティの問題摘出と原因分析を行う評価手法。

• エラー表示には場所・理由・直し方を含める
  住所入力で「入力エラー」とだけ表示すると、どの値をどう直すのか分からない。「郵便番号はハイフンなしの7桁で入力してください」と該当欄の近くに示せば、必要な操作を判断できる。

  この場合正しく入力済みの氏名や住所まで消すと、同じ作業をやり直す負担が増える。入力値を保ち、修正対象を示し、送信後には完了したことを知らせるところまでが一連の操作になる。 W3Cのフォーム通知の解説 でも分かる説明と修正のための指示、成功時の通知が扱われている。

インターフェース設計

ヒューマンインターフェースでは利用者の年齢、能力、利用環境などの違いを考慮し、多様な人が情報へ到達して操作できるように設計する。

• ユニバーサルデザイン
  ユニバーサルデザインとは文化、言語、国籍、年齢、性別、障害、能力を問わず、可能な限り多くの人が利用できることを目的とした設計方針を指し、ユニバーサルデザインの実現には アクセシビリティの向上 が不可欠となる。

  WAI （Web Accessibility Initiative）はWebアクセシビリティの国際的なガイドラインである WCAG （Web Content Accessibility Guidelines）をW3Cの標準化プロセスで策定している。
  日本ではWebコンテンツのアクセシビリティに関する日本産業規格として JIS X 8341-3:2016 がある。

  また、スマート端末（スマートフォン、タブレット等）の小さな画面を優先して設計し、より大きな画面へ段階的に拡張する考え方を モバイルファースト という。

  レスポンシブWebデザイン は画面サイズなどに応じてレイアウトを適応させる設計手法である。モバイルファーストで実装することもできるが、両者は同じ概念ではない。

• 色だけで伝えない理由を必須項目の例で考える
  未入力の欄を赤くするだけでは、色の違いを判別しにくい人や音声で内容を読む人に必要な情報が伝わらない。「メールアドレスは必須です」という文を用意し、どの入力欄の説明かを対応付ける必要がある。

  同様に必須項目を赤色だけで区別するより、「必須」という文字をラベルに含めると、意味を複数の手段で伝えられる。装飾としての色と操作に必要な情報を分けることがアクセシビリティの改善につながる。

• キーボードだけで一つの作業を最後まで試す
  フォームならマウスを使わずTabで各入力欄とボタンへ移動し、Shift+Tabで戻り、入力して送信できるかを試す。そのとき現在どこにフォーカスがあるかが見え、移動順が画面の流れと合っているかも確認する。

  ボタンへ移動できても、ダイアログを閉じる手段がなければ作業を終えられない。部品を個別に点検するだけでなく、開始から完了まで一つの課題を通して確認すると、操作の途中で行き詰まる箇所を見つけられる。これはアクセシビリティ全体を保証する試験ではないが、具体的な問題を発見する手順になる。

まとめ

• ヒューマンインターフェースは人がシステムを効率よく安全に利用できるよう設計する分野。
• ユーザビリティは使いやすさ全般、アクセシビリティは利用できる人や状況の幅を広げる視点。
• インフォメーションアーキテクチャではサイト構造、ナビゲーション、ラベルを組み合わせ、情報を探しやすくする。
• ヒューリスティック評価は代表的なユーザビリティ原則を基準にインターフェースの問題を見つける方法。
• 画像の代替テキストや色だけに依存しない必須表示はアクセシビリティを高める具体例となる。

• モバイルファーストは小さい画面から設計する考え方、レスポンシブWebデザインは画面サイズに応じてレイアウトを適応させる手法であり、同じ概念ではない。

• 操作の完了率と所要時間を分け、失敗した人がどこで迷ったかを確認する。情報を色だけに依存させず、一つの作業を最後まで行えるかを確かめる。

参考文献

• 瀬戸 美月 (\(2020\)) 『徹底攻略 応用情報技術者教科書』株式会社インプレス
• デジタル庁「ウェブアクセシビリティ」（日本語・政府機関の方針）
• Nielsen Norman Group, 10 Usability Heuristics for User Interface Design（英語・ユーザビリティ原則）
• W3C Web Accessibility Initiative, WCAG 2 Overview（英語・国際ガイドライン）
• ISO, ISO 9241-11:2018 — Usability: Definitions and concepts（英語・国際規格概要）