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

ねらい

人間とコンピュータの接点であるユーザーインタフェースを学びます。このレッスンを終えると、情報アーキテクチャの考え方、ユーザビリティとアクセシビリティの違い、音声やジェスチャーによる操作技術、GUIの構成部品の使い分けを説明できるようになります。

情報アーキテクチャ：情報を見つけやすく整える

たくさんの情報を利用者が見つけやすいように組織化し構造化する考え方を情報アーキテクチャ（インフォメーションアーキテクチャ）といいます。五十音順やカテゴリ別に整理する組織化、階層型やタグ付けで関係を表す構造化が基本です。

整理した情報には、内容を端的に表すラベルを付けます。人間が一度に把握できる量には限りがあるため、情報を意味のあるかたまりであるチャンクに分けることも大切です。目的の場所へ導く仕組みがナビゲーションで、ウェブサイトのメニューやパンくずリストがその実例です。

ユーザーインタフェースの要件と技術

ユーザビリティとアクセシビリティ

インタフェースの品質を語る2つの言葉を区別しましょう。ユーザビリティは、目的の達成のしやすさ、つまり使いやすさの度合いです。アクセシビリティは、年齢や障害の有無などにかかわらず、どれだけ多くの人が利用できるかという到達のしやすさです。対話しながら操作を進めるインタラクティブシステムの設計には、インタラクションの原則と呼ばれる指針があり、利用者の操作の分析や、人間の身体的適合性、見たいものだけを見てしまう選択的知覚の性質への配慮が求められます。「押せそうな見た目のボタン」のように、使い方を自然に伝える手がかりをシグニファイアといいます。

広がるインタフェースの形

キーボードとマウスだけがインタフェースではありません。人間の自然な動作で操作するNUIという考え方のもと、声で操作するVUI、身ぶりで操作するジェスチャーインタフェース、言葉を話し言葉のまま伝える自然言語インタフェースが広がっています。VUI・ジェスチャー・自然言語インタフェースは、いずれもNUIという1つの考え方の中に含まれる技術です。

スマートフォンのマルチタッチインタフェースでは、タップ、スワイプ、フリック、ピンチ、ロングプレスといった操作が使われます。これらを支えるのが、音声認識、画像認識、動画認識と、その土台になる特徴抽出の技術です。

GUI：視覚的な部品で直感的に操作する

グラフィックスによる視覚的な表示と、ポインティングデバイスによる直感的な操作を組み合わせたインタフェースがGUIです。画面はウィンドウを単位に構成され、機能はアイコンで表されます。

入力部品は、入力の性質に合わせて使い分けます。

このほか、操作した場所に一時的に現れるポップアップメニュー、見出しを押すと中身が開閉するアコーディオン、マウスを重ねたときに変化するホバー（ロールオーバー）、部品の説明を小さく表示するツールチップといった部品と振る舞いがあります。画面設計では、こうした部品の選択に加えて、操作の流れが迷いなく進むことと、誤操作からの回復のしやすさに配慮します。

例題

次の問いに答えてください。

問1 目的の達成のしやすさを表すユーザビリティに対して、年齢や障害の有無にかかわらず多くの人が利用できる度合いを表す言葉は何ですか。

問2 声でシステムを操作するユーザーインタフェースを何といいますか。

解答と解説

問1の答えはアクセシビリティです。ユーザビリティは「使う人にとっての使いやすさ」、アクセシビリティは「そもそも使える人の広さ」と整理できます。

問2の答えはVUIです。スマートスピーカーの操作が身近な例で、人間の自然な動作で操作するNUIという考え方のひとつです。

応用

本試験を意識した問題を解いてみましょう。

問 入力フォームで、互いに排他的な複数の選択肢の中から1つだけを選ばせたいとき、GUIの部品として適切なものはどれでしょうか。次の中から選んでください。

1. ラジオボタン
2. チェックボックス
3. テキストボックス
4. ツールチップ

解答と解説

答えは1のラジオボタンです。1つを選ぶと他の選択が外れる排他的な選択に使われ、「1つだけ選ぶ」という制約を部品の振る舞いそのもので保証できます。2のチェックボックスは複数選択を許す部品なので、1つだけ選ばせたい場面には向きません。3のテキストボックスは自由入力の部品で、表記の揺れや誤入力を防げません。4のツールチップは部品の説明を一時的に表示する仕組みであり、入力のための部品ではありません。