TERM GUIDE · DESIGN

ユーザインターフェース

「ユーザインターフェース」とは

ユーザインターフェース(UI:User Interface)とは、人とコンピュータや機械が情報をやり取りするための接点のことです。

例えば、ATMの画面やボタン、Webサイトのメニュー、スマートフォンのアイコン、文字入力欄などは、すべてユーザインターフェースの一部です。

利用者はユーザインターフェースを通して、システムに指示を与えたり、システムから情報を受け取ったりします。そのため、単に見た目を整えるだけでなく、利用者が迷わず、効率よく、間違いにくく操作できることが重要です。

システムの状態を分かりやすく伝える

使いやすいユーザインターフェースでは、システムが現在どのような状態にあるのかを利用者に伝える必要があります。例えば、時間のかかる処理を行っているときには、次のような工夫が考えられます。

  • 「処理中」と表示する

  • 進捗率を「60%」などと表示する

  • 残り時間の目安を表示する

  • プログレスバーで処理の進み具合を示す

何も表示されなければ、利用者は「操作を受け付けていないのか」「処理が止まったのか」と判断できません。システムの状態を適切に示すことは、利用者の不安や誤操作を減らすことにつながります。

また、画面ごとに同じ機能のボタンの位置や名称が大きく変わると、利用者は操作方法を覚えにくくなります。画面内の表示や操作方法には一貫性を持たせることが望ましいです。

操作しやすい配置

画面上のボタンやメニューは、どこに配置するかによって選択しやすさが変わります。

マウスなどで対象物を選択するときは、一般に、カーソルから近い対象物ほど選択しやすいという性質があります。移動する距離が短くなるためです。

また、画面の端に接している対象物も選択しやすいです。カーソルは画面の外へ進まないため、画面端に向かって大きく動かしても対象物を通り越しにくいからです。

したがって、同じ大きさの対象物なら、カーソルに近く、画面端に接している対象物は特に選択しやすくなります。

このような性質を利用すると、よく使うメニュー項目をカーソルの近くや選択しやすい場所に配置し、利用頻度の低い項目を比較的遠い場所に配置する、といった設計ができます。

なお、一般には対象物が大きいほど選択しやすくなります。つまり、ボタンなどの操作対象については、距離・大きさ・配置を考えることが重要です。

入力を助ける機能

ユーザインターフェースには、利用者の入力の手間を減らす機能もあります。その一つがオートコンプリートです。

オートコンプリートとは、利用者が文字を入力している途中で、その文字列に応じた候補を表示し、候補を選ぶことで入力を補完できる機能です。

例えば、検索欄に「ユーザ」と入力すると、次のような候補を表示する仕組みがこれに当たります。

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

  • ユーザビリティ

  • ユーザ認証

入力する文字数を減らせるだけでなく、入力ミスを防ぎやすくする効果もあります。

GUIの代表的な部品

画面上のアイコンやボタン、メニューなどを使って視覚的に操作する方式をGUI(Graphical User Interface)といいます。GUIでは、目的に応じてさまざまな部品が使われます。

ラジオボタンは、複数の選択肢の中から一つだけを選択するときに使います。

例:
○ 普通
○ 急行
● 特急

チェックボックスは、複数の選択肢から複数を選択してよい場合に使います。

例:
☑ 数学
☐ 国語
☑ 情報

したがって、次のように区別するとよいでしょう。

  • 一つだけ選択 → ラジオボタン

  • 複数選択可能 → チェックボックス

このほか、画面を上下左右に移動するためのスクロールバーや、処理の進み具合を示すプログレスバーなどもGUIで使われる代表的な部品です。

CUI

CUI(Character User Interface)は、主にキーボードから文字で命令を入力してコンピュータを操作する方式です。Windowsのコマンドプロンプトや、Linuxなどで利用されるターミナルが代表例です。

例えば、ファイルを開く操作でも、GUIではアイコンをクリックして操作するのに対し、CUIではコマンドを文字で入力して操作します。

一般にGUIは、画面を見ながら直感的に操作しやすい方式です。一方、CUIはコマンドを覚える必要がありますが、複雑な処理を効率よく実行したり、同じ処理を自動化したりするのに適しています。

ユーザインターフェースとユーザビリティ

ユーザインターフェースと関連の深い言葉にユーザビリティがあります。

ユーザインターフェースが「利用者とシステムとの接点」を表すのに対し、ユーザビリティは、そのシステムが利用者にとってどの程度使いやすいかという性質を表します。

例えば、次のような設計は、ユーザインターフェースを工夫してユーザビリティを高める例です。

  • よく使うボタンを選択しやすい場所に配置する

  • ボタンの名称や位置を画面間で統一する

  • 処理中であることを進捗表示で知らせる

  • オートコンプリートで文字入力を補助する

  • 一つだけ選ぶ場面ではラジオボタンを使う

ユーザインターフェースについて考えるときは、単に「画面の見た目」ではなく、利用者がどのように情報を受け取り、どのように操作するのかを設計するものと捉えることが重要です。

EXAMPLE

例題

ユーザインターフェース · EXAMPLE応用情報技術者H22秋期午前 問26(改題)

ユーザインタフェースで、システムが現在どのような状態かを利用者に分かりやすく示す例として最も適当なものはどれか。

  1. 0

    処理中に進捗率や残り時間の目安を表示する

  2. 1

    画面ごとに操作ボタンの位置や名称を大きく変える

  3. 2

    必須項目を色だけで示し、文字では説明しない

  4. 3

    装飾画像を増やし、処理の状態は表示しない

解答・解説を確認

正解0.処理中に進捗率や残り時間の目安を表示する

解説

進捗率や残り時間を表示すると、利用者はシステムが処理中であることや待ち時間の目安を把握できます。

出典
応用情報技術者H22秋期午前 問26(改題)

PRACTICE

ユーザインターフェースの問題に挑戦