「備考」や「お問い合わせ内容」等のtextareaのサイズに注意

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

最近、一ユーザーの立場で、1日に100サイト程度のフォームを観覧・送信をしているのですが、ふと同じ点が気になったので今日この記事を書くことを決めました。


それは何かと言いますと、複数行入力欄(<textarea>)の縦・横幅サイズです。

以前にも少しお話したことがある(→ フォーム離脱原因6~textareaのサイズを大きくする
のですが、
例えば お問い合わせフォームの【問い合わせ内容】のような、textareaを使用する入力欄のサイズが小さすぎて非常に見づらく、確認するのも一苦労ということを感じました。

仮に確認ページを用意していても、“確認ページへ移動する前の確認”ですので意味をなしません。

サービスの内容を詳しく知りたい場合やビジネスメールなどを送る際には、必ずと言っていいほど送信ボタンクリック前に見直します。

また、特に目的もなく置いているお問い合わせフォームでしたらまだ良いのですが、重要な役割を果たしているフォームでtextareaを使用している場合はコンバーションにも影響します。

送信前にユーザーのストレスを溜めていては、そこで離脱するユーザーはもちろんのこと、お問い合わせに対しての返信メールにもマイナスの影響を与えかねません。

ユーザーのことを考えても、売上のことを考えても、サイトのことを考えても、複数行入力欄のサイズは、まず見直したほうが良いフォームパーツの一部と言えます。

そもそもの原因を考えてみました。

なぜここまでtextarea使用欄のサイズが小さいのかを考えてみました。

1、サンプルフォームをそのまま使用している

フォームシステムは大半のサイトがどこかのサービスを使用しています。

そして自動生成されたHTMLをそのまま貼りつけて使用しています。

これが最大の原因でして、お世辞にもサンプルフォームのHTMLはユーザーのことを考慮しているとは言えません。

今回問題に挙げているtextareaだけでなく、labelを使用していないサンプルも多いです。

是非、サンプルフォームはそのまま使用するのではなく、少しの修正を加えて使いやすい・送信率の高いフォームを制作しましょう。

2、入力しない人が多いと思い込んでいる

【備考】などの、形式上で表示させているような入力欄は、入力しない、または少しの入力、と思い込んでいるサイト運営者が多いようです。

しかし、私がそうだったように、中にはサイトの感想や商品の感想を送るユーザーも存在します。

入力欄を設置している以上、いつ、誰が、どのような目的で使用するかはわかりませんので、設置しているからにはユーザーのことを少しでも考えたフォームにしましょう。

3、修正がめんどくさいと思っている

・・・。

是非めんどくさがらずに修正してください。。。

細かく考えますとまだありそうな気がしますが、一番が1の【サンプルフォームをそのまま使用している】ということからだと考えられます。

確かに自動生成してもらえるのは楽だと思いますが、そのまま貼り付けるだけではなく、数字の修正だけで終わりますので、改善してもらいたいと思います。

実際にユーザーの立場になってみてください。

こんな説明をしようとも全く意味が無い(と言いますか、読んで終わり)と思いますので、ユーザーの立場となって下のフォームに記述してみてください。

(上の文章をなんでもいいので5行程度コピーして貼りつけてみますと確認する際の見やすさの違いがわかります。)

●よく見るテキストの小さいフォーム例

お問い合わせ内容

次に・・・

●ほんの少しの手を加えたフォーム改善例

備考

5行程度の文章を入力しますと、どちらがストレスが溜まらず確認できるかが一目瞭然です。

さらに10行程度の文章を入力しますと、スクロールした際に最上部・下部まで進みますと、全体的な画面まで上下に移動し、大変ストレスになることがわかると思います。


是非この記事を皆様が読んで、少しでもユーザーのことを考えたフォームが増えて貰えたらと思います。

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

タグ: | |