SIGMA-SE Math & Tech Library

SIGMA-SE Math & Tech Library


数学と情報技術をテーマに、書籍や教材だけではつかみにくい考え方を具体例とともに簡潔にわかりやすく伝える解説サイトです。
技術の歴史や背景、関連知識の整理、学習のための覚書や要約記事も掲載しています。

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

概要

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

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

この記事の構成

  • ヒューマンインターフェース技術
    ヒューマンインターフェース技術とは、利用者がシステムへ情報を伝える手段(インプット)とシステムが利用者に情報を伝える手段(アウトプット)を利用者側が使いやすい形で実現する技術のこと。
  • ユーザーインターフェース
    利用者とコンピューター間の情報を受け渡す仕組みのことで、ユーザーインターフェースの代表的な設計方針として、次のヒューリスティックスがある。
  • インターフェース設計
    ヒューマンインターフェースでは、次のユニバーサルデザインを基準にし、画面設計をはじめ、コード設計(シーケンスコード、桁別コード、区分コード)などの細かなインターフェースを設計していく。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

インターフェース設計

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

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

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

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

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

まとめ

  • ヒューマンインターフェースは、人がシステムを効率よく安全に利用できるよう設計する分野。
  • ユーザビリティは使いやすさ全般、アクセシビリティは利用できる人や状況の幅を広げる視点。
  • GUIは視覚的な部品、CUIは文字コマンドを中心に操作。
  • 入力チェックは誤った値を防ぎ、入力支援は利用者が正しく入力しやすくする。
  • 視認性は情報の見つけやすさ、可読性は文字や文章の読みやすさを表す。エラー表示では、発生内容と修正方法を伝える。

参考文献

この記事を共有
Xで共有 Facebookで共有 LINEで共有



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