フォーム離脱原因6~textareaのサイズを大きくする

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

※ 数回前より「なぜフォームページで離脱するようなことが起きるのかと改善方法」というエントリーが続いています。

大まかなフォームでの離脱理由

今日は6番目の「何をしたかわからない」ということについての解説と改善を話していきます。


前回のエントリー「何を入力するかわからない」と非常に似ているのですが、今回は「したか」ということで入力後の話です。

入力した内容を、送信前にページ内で見直すユーザーは全体の85%程(弊社調べ)います。

入力中に気付かなかった間違えを修正したり、おかしなところがないかをチェックするわけなのですが、その際に何を入力したかがわからなければ、ユーザーのストレスが溜まる原因になります。

基本的に前回のエントリーを参考にフォームを制作していれば問題はないのですが、ひとつプラスの改善テクニックをご紹介します。


改善テクニック : <textarea>の幅、高さを広くとる

これについては入力中にも気になるのですが、ASPサンプルフォームをそのまま使用している場合や、特に指定するコードを入れない場合は、textareaで表示される複数行テキストの欄が極端に小さい場合があります。

●よく見るテキストエリア

備考

このように2,3行しか表示されないテキストエリアでは、入力後はもちろん入力中にも何を書いたかがスクロールしなくてはわかりません。

ユーザーが見直した際にストレスを感じる原因になりますので、textareaには幅・高さを指定し、必ず大きくしましょう。

●テキストエリア改善例

備考

で、
この方法のHTMLタグです。

テキストエリアサイズ変更HTMLタグ

  1. <textarea style=”width: 500px; height: 150px”></textarea>

■ 補足

<textarea cols=”20″ rows=”5″></textarea>

というコードでも幅・高さを指定することができます(と言いますかこちらの方がメジャーです)。
しかし、このコードは幅と高さを“文字数”で指定しているものですので、1文字あたりのサイズが違うブラウザ環境によっては全体のデザインが崩れてしまう可能性があります

ですので、textareaに限らず<input type=”text”>なども、幅・高さを指定する場合はCSSコードを適応させる「style=””」というコードを記述することをおすすめします。

テキストエリア幅・高さをユーザー側で自由に変更する

※ これより以下は、現在フォームキーパーご購入者様限定スクリプトとしています。

ただ、このサイズはあくまでも制作者側が決めたサイズです。
ユーザーによっては、指定したサイズを大きく上回る文字数の入力をする方もいらっしゃいます。

そのようなユーザーには、初めに例に挙げた小さすぎるテキストエリアとストレスの感じ方は同じですので、ユーザー側でtextareaサイズを変更出来るように配慮しましょう。

●テキストエリアサイズを自由に変更できる項目

ちなみにこの機能はGoogleChromeでは標準で設定されています。
ですが、どこまでも拡大することが可能だし、気づかない人も多いだろうし・・・正直、サイト運営者側からしてもユーザー側からしても曖昧な機能かと思います。

また『日本人=IE(Internet Explorer)』というところもありますので、万人には通用しません。

ユーザーに依存されないEFOを施策したい方はこの機能の実装をおすすめします。

※ この機能を使用したいフォームキーパーご購入者様は桐山までご連絡ください。


テキストエリアサイズ変更スクリプトはフォームキーパーご購入者様限定としていますが、先の改善だけでも少なからず効果はあります。

テキストエリアの幅・高さ小さく気になる方は必ず実践しましょう。

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