インタフェース設計

ねらい

人が機械を操作する接点の設計を学びます。このレッスンを終えると、使いやすさを生む具体的な工夫を挙げられるようになり、間違いを防ぐ設計の考え方が分かるようになります。

使いやすさは、覚えさせないことから

ユーザインタフェース（UI）は、人と機械が接する部分です。画面、ボタン、音声、身振りなど、操作のすべてが含まれます。

使いにくい設計の多くは、利用者に覚えることを求めます。どのボタンが何をするか、いまどの段階にいるか、何を入力すべきか。これらを覚えさせず、画面に出しておくのが基本です。

守る原則には、次のようなものがあります。

• 一貫性… 同じ意味のものは、同じ見た目・同じ位置に置きます。画面ごとに「戻る」の位置が違うと、毎回探すことになります。
• 今どこにいるかを示す… 全5段階の3段目である、といった位置を表示します。
• 元に戻せる… 間違えても取り返せると分かっていれば、安心して操作できます。
• 待たせるときは知らせる… 処理中であることが分かれば、壊れたと思わずに済みます。
• 専門用語を避ける… 利用者の言葉で書きます。

入力の設計 — 間違いは、起こる前に防ぐ

入力の誤りは、利用者の不注意ではなく設計で減らせます。

• 選べるものは選ばせる。都道府県を自由入力にすると表記が揺れます。一覧から選ばせれば揺れません。
• 書式を画面で示す。日付なら入力例を添えるか、日付を選ぶ部品を使います。
• 入力の途中で知らせる。送信してから「誤りがあります」と返すより、入力した直後に伝えるほうが直しやすくなります。
• 初期値を入れておく。多くの人が選ぶ値をあらかじめ入れておけば、操作が減ります。
• 必須と任意を明示する。

そして、入力された値は必ず確かめます。画面側の確認は利用者の助けになりますが、それだけでは守りになりません。画面を通さずにデータを送ることができるためです。受け取る側でも必ず確かめます。

画面の部品

• ラジオボタン… 1つだけ選ぶとき。
• チェックボックス… 複数選べるとき。
• プルダウンメニュー… 選択肢が多く、画面を節約したいとき。
• テキストボックス… 自由に入力するとき。

選択肢の数と、いくつ選べるかで部品が決まります。1つだけ選ぶ場面にチェックボックスを使うと、利用者は複数選べると誤解します。

使いやすさを確かめる

• ユーザビリティ… その利用者が、目的をどれだけ効率よく、満足して達成できるかを表します。
• UX（ユーザエクスペリエンス）… 使う前後まで含めた体験全体を指します。使いやすさはその一部です。
• ユーザビリティテスト… 実際の利用者に操作してもらい、どこで詰まるかを観察します。作った人は操作を知っているので、自分では詰まりません。

まとめ

インタフェース設計の基本は、利用者に覚えさせないことです。一貫性を保ち、現在地を示し、元に戻せるようにします。入力の誤りは設計で減らせます。選べるものは選ばせ、書式を示し、その場で知らせます。ただし受け取る側での確認は省けません。使いやすさは、実際の利用者に操作してもらって確かめます。

理解の確認

利用者が入力した内容について、画面側（ブラウザ）で書式の確認を行っています。「画面側で確認しているので、受け取るサーバ側では確認しなくてよい」という判断は正しいでしょうか。

答え: 正しくありません。画面側の確認は、利用者が誤りにすぐ気づけるようにするための利便性のしくみであって、守りのしくみではありません。画面を経由せずにサーバへ直接データを送ることができるため、画面側の確認は迂回できます。悪意のある相手であれば、意図的に不正な値を送ってきます。したがって、受け取るサーバ側でも必ず内容を確かめる必要があります。画面側の確認は使いやすさのため、サーバ側の確認は正しさと安全のためと、目的が違うものだと理解しておきます。