入力フォームのインターフェースパターン

IDIA.JP > レポート > 入力フォームのインターフェースパターン
IDIA.JP

Webアプリケーションなどで用いられる入力フォームは、制限の程度により3つのパターンに分けることができる。ユーザーが自由に入力できるフォームでは、入力内容をアプリケーション側で処理する必要がある。

入力フォームの3つのパターン

  1. 制限のない入力フォーム
  2. ゆるく制限された入力フォーム
  3. 制限された入力フォーム

制限のない入力フォーム

寛容さをもたせた入力形式(Forgiving Format)

ユーザーには形式を問わずに入力させ、入力された値をアプリケーション側で解釈する。アプリケーション側で行う処理は全角・半角の変換や、不適切なデータの除外など多岐に渡る。

入力の手がかりを与える(Input Prompt)

入力時に参考となる値を予備入力しておく。

デフォルト値を設定しておく(Good Defaults)

ユーザーが入力するであろう値の中で最も適切な値をデフォルトとして入力しておく。

ヒントを添える(Input Hints)

空白のテキストフィールドの近くに、解説や入力例を提示する。

例)入力例
オートコンプリート(Autocompletion)

入力された文字から単語を予測し、自動的に補完する。また過去の入力履歴から該当するであろう値を自動的に補完する。

ゆるく制限された入力フォーム

穴埋め(Fill-In-The-Blanks)

散文やフレーズの形式をなしながら、空白を埋めさせる。

私はを探している
構造化された入力形式(Structured Format)

要求されるデータの構造を反映したテキストフィールドを設ける。

電話番号:
同一ページ内でエラーメッセージを表示(Same-Page Error Messages)

フォームがあるページ上でエラーメッセージを表示する。

※必須項目です

制限された入力フォーム

ドロップダウン式の選択(Dropdown Chooser)

ドロップダウン、ラジオボタン、ポップアップなどにより複雑な値の中から選ばせる。

画像による選択肢の提示(Illustrated Choices)

画像で選択肢を提示し、選ばせる。

どのパターンを使うべきか

入力に制限を設けたフォームはアプリケーション側で対応すべき処理が少なくなり、開発は容易になる。また多くのユーザーにとって、とくにはじめてそのサービスを利用するユーザーにとっては「フォームに入力すべき適切な値」がわからないため、ヒントやデフォルト値、選択肢を与えて入力をサポートする必要がある。
一方、制限のあるフォームではユーザーからの要求がフィルタリングされる。それゆえ得られる情報が限定され、「ユーザーの本当のニーズ」を把握することが難しくなる。
そのフォームで重要なのは「情報の提示」と「情報の収集」のどちらなのかを見極め、適切なパターンを選ぶべきだ。

参考

記事のデータ

公開日2011年5月16日
カテゴリー
タグ
関連する記事

記事を共有する