入力フォームを考える

企業サイトなら少なからず何らかの入力フォームが搭載されていますが、サイト運用者側の欲しい情報をユーザーがいかにストレスなく入力させるか？という問題は、常に話題に上りつつ「これ！」というデファクトスタンダードはないように思います。
というのも、各サイトのターゲットとなるユーザーが異なること、それによりキーボードやマウスのPC操作レベルがことなること、さらに、取得する情報の内容によりベストな方法を入力フォームごとに考慮する必要があるためです。

ただ、入力フォームを実装する場合の基本的な覚書はあってしかるべきではないでしょうか。今回は、私たちがフォームを構築する場合の基本的なルールを改めてピックアップしたいと思います。

1. 必要のない情報は取得しない
あらためて言うまでもなく当然の話です。
さらに表題を噛み砕くのであれば、取得する情報をむやみに細分化しないということです。

たとえば、郵便番号を入力させる場合、3桁と4桁それぞれのフィールドを用意して入力をさせる場合がありますが、現状郵便番号は7桁構成で「3桁-4桁」のフォーマットと決まっています。
であれば、ユーザー操作をできる限り減らし、かつ入力ミスも防ぐためにも、1つのフィールドで入力させるのがベストではないでしょうか。

2. 必ず入力する項目、任意入力の項目を明確に
サイト運用側で必ず入力する必要がある項目、必ずしも入力しなくても構わない項目を明確に表示する方法として、必須項目に何らかの「しるし」をつける方法がよく見られると思います。

では、例えばほぼ全ての項目が必須項目の場合は、どうでしょうか？
（必須の「しるし」が至る所に表示されていると、入力する気力を失うのは私だけでしょうか。）

このようなケースの場合は、入力フォームの前にすべての項目が必須項目であることを掲載した上で、特例（いずれか一方のみ必須の場合など）の項目に特記するのがベストと考えています。

3. 入力エラーはユーザーにストレスなく
前提として、入力エラーのチェックは入力時（JavaScript等）とデータ送信時（Webアプリケーション側）の両方でチェックを行う必要があると思います。
バックエンドの仕組みを言ってしまえばJavaScriptを無効にされてしまった場合などに有効であったり、入力時にはチェックできないエラーをデータ送信時にチェックしエラー処理を補填するためです。

ただ、エラー処理を行う場合に最重要点は、「ユーザーができるだけストレスを感じない」機能であることです。せっかくユーザーが入力した情報がエラー処理如何で、途中でやめてしまい運用側まで届かないようでは、入力フォームが機能できていないことにつながると思います。

ではどのようなエラー処理がよいのでしょうか？

まずは、フリー入力の項目には記入例をきちんと明示したいものです。その上で、入力時であれば、それぞれの入力項目の入力を終えた時点でエラーチェックをしメッセージを出すという方法が最近よく見られます。メッセージの内容とともに見せ方を工夫することで、有効な機能と思います。
データ送信時の場合は、入力時のエラーと同じようにフォーム内にエラーメッセージを表示させてエラーの内容を見ながら修正を行えるようにするのがベターと思います。

ただ、エラー処理もデファクトスタンダードはないと考えています。
サイトの特性、ターゲットユーザー、取得する情報の内容等を総合的に考慮することが必要です。

4. ユーザー操作補助機能を活用する
住所を登録する場合、「郵便番号」　「都道府県」　「市区町村」　「番地」　「建物名」と合計5つの項目に分割して入力させることが多いかと思います。この場合、郵便番号から市区町村までを検索する補助機能を実装するのがよいと思います。
サイト運用側が「運用上、分割した住所データを欲しい」という都合があるのであれば、ユーザーに入力を補助する機能を提供し、スムーズに的確な情報を取得できる仕組みを構築すべきではないでしょうか。

また、細かいことですが、ラジオボタンやチェックボックスには必ずlabel機能をつけるべきと思います。ラジオボタンやチェックボックスはクリックする領域が狭いため、マウス操作に慣れていないユーザーには難しいものです。そこで、label機能をつけることでクリックする領域が拡大し、格段にユーザーが操作しやすくなると思います。

最後に、入力フォームは必ずしも（X）HTMLで作られる必要はないと思っています。
入力項目が多く延々とスクロールしないと完了しない入力フォームとなるのであれば、ページ遷移なく入力処理が可能な技術（FlashやFlexなど）を使用するのも選択肢としてあるのではないでしょうか。
いずれにしても、「いかにユーザーにストレスなくサイト運用側が欲しい情報を取得できるか？」ということを最終目標に掲げて、入力フォームを設計していきたいと思います。

RECENT ENTRY

2008.12.08

入力フォームを考える

2008.10.08

Webサイト診断サービスを開始しました

2008.10.03

スムーススクロールの必要性を考える

2008.09.26

印刷用CSSはやはりあった方がよいと思う