SIGMA-SE Tech Blog

SIGMA-SE Tech Blog


当サイトは、過去に運営していた別ドメイン(unisia-se.com)から sigma-se.com へ移行した技術ブログです。
旧サイトの記事をもとに、内容の精査・加筆・最新化を行い再構成しています。
正確で実用的な情報提供を目的としています。

応用情報技術 - 基礎:16/21 ヒューマンインターフェース(UI設計・アクセシビリティ)

概要

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

ヒューマンインターフェースは、人がシステムを理解し、迷わず操作できるようにするための考え方となる。
機能だけでなく、使いやすさ、分かりやすさ、誤操作の防止が重要になる。

この記事で扱うこと

  • CUI、GUI、NUI などのインターフェースの違い。
  • 入力支援や操作性を高める工夫。
  • 画面設計で重要な一貫性、視認性、操作性。
  • アクセシビリティとユーザビリティの違い。
  • ヒューマンエラーを減らす設計の考え方。

理解しておきたい要点

分野 整理する内容
UI分類 CUI、GUI、音声UI、タッチUIなどの特徴。
入力支援 オートコンプリート、入力チェック、ガイド表示。
画面設計 一貫性、フィードバック、エラー防止。
アクセシビリティ 高齢者や障害者を含めた利用しやすさ。
ユーザビリティ 効率よく、満足して目的を達成できるか。

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

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

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

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

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

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

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

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

  • アクセシビリティ
    高齢や障害、病気による運動機能や視聴覚機能の制約などでサービスが容易に利用できない人へどれだけ配慮し、利用しやすくしているかの度合を指す。

    ※ アクセシビリティの向上例としては、画像情報を音声で伝えるスクリーンリーダーや、必須入力項目などの強調色が認識できない人向けに「必須」という文字で明記する考慮などがある。

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

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

  • ヒューリスティックス
    ヤコブ・ニールセンが提唱した経験則を基にしたインタラクションデザインの基準化を目的とした原則で下記の \(10\) ヵ条がある。
    ※ 具体的なユーザビリティガイドラインではないため、ヒューリスティックスと呼ばれている。

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

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

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

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

    5. エラーの予防
      可能な限りエラーが発生させない設計とし、エラーが発生した場合は、そのメッセージが適切であること。

    6. 想起より再確認
      情報を表示するエリアやその導線となるアクションを設け、ユーザーに想起させないこと。

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

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

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

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

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

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

    • ヒューリスティックス評価
      上記ヒューリスティックスの原則 \(10\) ヵ条を基準にUX(利用者体験で得られる経験則)の有識者が評価する方法。

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

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

インターフェース設計

ヒューマンインターフェースでは、次のユニバーサルデザインを基準にし、画面設計をはじめ、コード設計(シーケンスコード、桁別コード、区分コード)などの細かなインターフェースを設計していく。

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

    Webアクセシビリティの向上を率先する組織であるWAI(Web Accessibility Initiative)では、そのガイドラインを作成し、Webアクセシビリティの向上のためのJIS X 8341という規格を定めている。

    また、スマート端末(スマートフォン、タブレット等)のアクセシビリティ向上手法として、スマート端末を優先に最適化するモバイルファーストというコンセプトがある。

    なお、レスポンシブWebデザインもモバイルファーストをコンセプトとしたアクセシビリティの向上技術である。

違いを整理する

比較する項目 整理するポイント
ユーザビリティとアクセシビリティ 使いやすさ全般か、利用できる人の幅を広げる視点かで異なる。
GUIとCUI 視覚的操作か文字コマンド操作かで見分ける。
入力チェックと入力支援 誤りを防ぐか、入力しやすくするかで役割が異なる。
視認性と可読性 見つけやすさと読みやすさを分けて考える。
エラー表示 何が起きたか、どう直すかを伝えることが重要。

実務とのつながり

  • UI設計
    業務システムやWebアプリの操作ミス削減に直結する。

  • アクセシビリティ
    多様な利用者が使えるサービス設計に必要となる。

  • 入力支援
    フォーム離脱や入力ミスを減らす改善につながる。

まとめ

  • ヒューマンインターフェースは、人がシステムを使いやすくするための設計分野となる。
  • ユーザビリティとアクセシビリティは似ているが、注目する観点が異なる。
  • 分かりやすい画面設計は、操作効率だけでなく誤操作防止にもつながる。

参考文献

  • 瀬戸 美月 (\(2020\)) 『徹底攻略 応用情報技術者教科書』株式会社インプレス


Copyright SIGMA-SE All Rights Reserved.
s-hama@sigma-se.jp