フォーム【入力欄】改善8つの方法

2010年09月23日UP
  • このエントリーをはてなブックマークに追加

以前、「【項目】改善8つのこと」という記事を書きましたが、今日は【入力欄】の改善についての8つの方法になります。


1、<input>、<textarea> 等のサイズを考える

入力欄のサイズは、入力中にストレスを与えるか、わかりやすく入力することができるかを分ける非常に重要なポイントとなっています。

サンプルソースは必ずと言っていいほど入力サイズが小さいですので改善が必要になります。

2、2つの余白を考える

ひとつは、入力欄を置いている場所の余白です。

枠から入力欄までの余白

ふたつめは、入力欄(input や textarea)自体の余白です。

入力欄自体の余白

この部分は、余白の欲しいinputやtextarea自体に、 <input style=”padding: 3px;” /> という指定をしますと変更することが出来ます。

3、文字色を考える

意外と知られていないのですが、入力欄内部の文字色を変更することも可能です。

これも入力欄 <input> タグ自体に <input style=”color: #色の指定;” /> というような指定をすると変更することが出来ます。

4、背景色を考える

文字色と合わせて背景色も考えましょう。

<input style=”background-color: #色の指定;” /> で変更することが可能です。

5、文字サイズを考える

ユーザー属性によっては、入力欄・文字サイズが大きい方が見やすい方もいらっしゃいます。

特に年代によって左右されやすいのですが、4,50代がターゲットのフォームは文字サイズが大きい方がストレスが溜まらないと言えます。
反対に10代などの若年層がターゲットの場合は文字サイズが小さいほうがストレスが溜まらないようです。

6、フォーカス時は背景色を変更する

input や textarea のフォーカス時(入力欄をクリックしてポイントを合わせた時)は背景色を変更させることによりどこに入力しようとしているのかが一目でわかるようになります。

※ 主要ブラウザであるIE以外の対策になります

7、<lavel>タグを使用する

<label>タグを使用することによりストレスを大幅に軽減させることが可能になります。ですので、必ず使用するようにしましょう。

<input type=”text”>の場合は項目と合わせて使う形になります。
type=”radio”、type=”checkbox” の場合は<input>タグに使う形になります。

設定方法につきましては → 以前の記事「labelタグの必要性」を参考にしてください。

8、補助するテキストは入力例も

例えば、



(全角)例:山田太郎

この時に(全角)や(必須)等だけでなく書き込み例を表示しておくことにより、入力する側はわかりやすくなります。


基本的に項目欄も入力欄も同様の対策、もしくは少し応用した対策になります。

HTMLやCSSで設定できるEFOは、ユーザー属性に依存されるような対策ばかりですので、送信率を測るテストすることをおすすめします。

では、今日もお読みいただきましてありがとうございました!

タグ: | |