フォーム離脱原因7~決済に信用を付ける

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

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

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

今日は最後の「(決済に信用がない)」ということについての解説と改善を話していきます。


まず、なぜカッコが付いているかと言いますと、この理由はお申し込みフォームにしか当てはまらないからです。
また、EFOかといわれるとそうではないような気もしますので一応カッコを付けました。

(ここでご紹介する改善がマイナスになってしまうと言うことではありません。)

ECサイトを運営している方以外にはためにならないかもしれませんが、お読みいただけましたら嬉しく思います。

決済にWEBサービスを使用している場合と、独自決済の場合で改善方法が変わってくる部分もありますので分けてご紹介します。


決済やご注文ページにWEBサービスを使用している方への対策

改善テクニック1 : ASPを変更する

決済に信用のないWEBサービスを使用している場合は、お申し込みページへ移動した瞬間に他サイトへ移動してしまうユーザーもいます。

ここではどのASPの信用がないかは言えませんが、ユーザーに嫌われているASPは確実に存在しています

WEBは口コミが広まるのが早いですので、このようなASPの情報も広まるのも早いです。

もし、アクセスがありサイト制作がきちんとできるが、成約率が低い場合はASPの変更も検討して見るのもいいのではないでしょうか。


改善テクニック2 : 複数のASPを使用する

テクニック1と合わせて、複数のASPを使用しテストしてみるのもいいと思います。

「他商品では良くないが、商品・ジャンルによってはそのASPは信用がある」
というような情報が回っている場合も稀にあります。

もちろん、どのジャンルでもどうしようもないASPも存在します。

ASPを変更する際も新規に契約する際も、まずは口コミを確認しましょう。


独自決済を使用している方への対策

改善テクニック1 : SSL会社を変更する

独自決済を使用する際には、もちろんお客様情報の送信を暗号化するSSLを使用しなくてはなりません。
※ 使用していない方は今すぐ導入しましょう。

どの会社のSSLを使用しているかで成果がかなり変わってきます。

一番効果の申し込み率が高いのはベリサイン社のSSLです。ただし、なかなかの高額ですので費用対効果を考えて導入しましょう。

他の会社が悪いとは言いませんが、SSLは信頼の象徴ですので価格で選ぶのはやめましょう。

改善テクニック2 : 決済ナビゲーションを入れる

決済ナビゲーションとは何かと言いますと、Amazonや楽天(あったかな?汗)などでも見たことがあると思いますが、「あと何を入力すれば終わり」「次に入力する内容はコレ」というようなナビゲーションです。

●Amazon決済ナビ
Amazon決済ナビ

これを表示させることによってユーザーに安心感を与えることができます。

Amazonは画像で見せていますが、テキストでも簡単に作ることが可能です。
ここでは一つの作成例を挙げます。

決済ナビ用HTMLタグ

  1. <p style="text-align: center; font-size: 90%; color: #999;">
  2. <span style="font-weight: bold; font-size: 120%; color: #f30;">宛先入力</span> >
  3. お支払い情報入力 >
  4. ご確認 >
  5. 完了 >
  6. 商品の発送
  7. </p>

そして、上記タグで表示させるのがコレです↓

宛先ご入力 >
お支払い情報ご入力 >
ご確認 >
完了 >
商品の発送

各ナビゲーション名はあなたの流れにあったものに変更してください。

また、上記例は宛先ご入力ページへの記述例です。

次のページである、お支払情報ご入力ページは、

  1. <p style="text-align: center; font-size: 90%; color: #999;">
  2. 宛先入力 >
  3. <span style="font-weight: bold; font-size: 120%; color: #f30;">お支払い情報入力</span> >
  4. ご確認 >
  5. 完了 >
  6. 商品の発送
  7. </p>

このように<span …></span>を次のナビゲーション名へ移動させてください。

宛先ご入力 >
お支払い情報ご入力 >
ご確認 >
完了 >
商品の発送

上のように表示させることができます。

さらに次のページは次のナビゲーション名へ移動・・・という風にすべてのページのわかりやすい位置に入れましょう。


今日はどんなフォームでも通用する改善ではありませんでしたので、わりとさらっと書きました。

このエントリーについて詳しく知りたい場合は、WEBで公開するような情報ではないような気がしますので、どの部分が気になっているのかを明記の上、メールをいただけましたらと思います。

今日でフォーム離脱原因の解説と改善を終わりにします。

次からも適当に的確に(笑)EFO情報を書いていきますので見ていただけましたらと思います。

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

フォーム離脱原因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を施策したい方はこの機能の実装をおすすめします。

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


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

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

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

フォーム離脱原因5~ASPサンプルソースはEFOに無頓着!?

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

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

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

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


入力欄や項目の意味がわからなく、何を入力するのかがわからないのもまた離脱につながってしまいます。

「そんなことは当たり前だ」
とあなたが思っていても、知らぬ間に万人にわかりやすいフォームではないものを作っていることがあります。

特にフォームシステムのASPを使用していて、サンプルソースをそのまま使用している方は注意が必要です。
大半のASPのサンプルソースはEFOが考慮されていません

今日のエントリーは、特にサンプルソースをそのまま使用している方に有効な改善をHTMLソースを交えてお伝えします。

●よくあるサンプルフォーム改善前(一例です。)

お名前
フリガナ
住所

このフォームを例として改善していこうと思います。


改善テクニック1 : 文字サイズを見直す

(おそらく)サンプルソースをそのまま使用しているであろうフォームは、極端に項目名の文字が小さかったりします。

あなたのサイトを確認して文字サイズが小さいと感じたら、以下のタグを参考に大きくしましょう。

文字サイズ拡大HTMLタグ

  1. <span style=”font-size: 110%;”>ここに項目名</span>

●使用例

<table>
<tr>
<th><span style=”font-size: 110%;”>お名前</span></th>
<td><input name=”test” value=”” type=”text” /></td>
</tr>
</table>

このような書き方をすると文字サイズを拡大することが出来ます。
(ちなみに「文字のサイズを110%にする」という命令になりますので、110の部分を任意の数値にすることによって微調整が出来ます。縮小も可能です。)

通常の大きさ → 110%の拡大文字 → 115%の拡大文字

また、文字サイズアップと合わせて太字にもしましょう。
※ 通常既に太文字になっていると思いますが、なっていない場合は必ず指定しましょう。

太字指定HTMLタグ

  1. <span style=”font-weight: bold;”>ここに項目名</span>
  2. サイズアップと合わせて指定する場合↓
    <span style=”font-size: 110%; font-weight: bold;”>ここに項目名</span>

改善テクニック2 : 項目名右寄、入力欄左寄

項目名の文字を右寄にし、入力欄を左寄にすることによって現在どの項目にいるのかが一瞬でつかめるようになります。

(両方左寄などでもスッキリ見せていれば問題はないのですが、項目欄の文字数に幅がある場合は、少ない文字数の項目が一瞬では識別できなくなってしまいます。)

項目、入力欄ともに左寄の例

名前
メールアドレス

項目右寄、入力欄左寄の例

名前
メールアドレス

どちらの方が、入力する内容が瞬間的に頭に入ってくるかは一目瞭然かと思います。

ではその実装方法のHTMLタグです。

左寄・右寄HTMLタグ

  1. 右寄 <span style=”text-aligh: right;”>ここに項目名</span>
  2. 左寄 <span style=”text-aligh: left;”>ここに項目名</span>

入力欄を左寄にするには、<input>タグの中に style=”text-aligh: left;” を記述します。

●使用例

<table>
<tr>
<th><span style=”text-aligh: right;”>項目名を右寄</span></th>
<td><input name=”test” value=”” type=”text” style=”text-aligh: left;” />入力欄を左寄</td>
</tr>
</table>

上記タグを参考に『項目名を左寄』『入力欄を右寄』で表示させるようにしましょう。


改善テクニック3 : 枠と入力欄の余白を取る

ASPサンプルフォームの見づらい理由はこれが一番かと思います。

<table>タグ内の余白が全くない、もしくは少ししかないために非常に見づらくストレスの溜まるフォームになってしまいます。

余白は以下のHTMLタグで指定します。

余白をとるHTMLタグ

  1. style=”padding: 10px; 5px 10px 5px”

padding というコードが余白を意味していて、その後の数値は左から、上、右、下、左、の順に余白をピクセルで指定してします。
padding のあとは上から時計回りに指定する。と覚えておくと簡単です。

このタグを項目名の要素と、入力欄の要素2つに記述します。

●使用例

<table>
<tr>
<th style=”padding: 10px; 5px 10px 5px”>項目名</th>
<td style=”padding: 10px; 5px 10px 5px”><input name=”test” value=”” type=”text” /></td>
</tr>
</table>

※ 余白のとり過ぎは逆によくありません。特に上下の余白を多めにとってしまいますとフォーム自体が無駄に長くなってしまいますので離脱率アップにつながってしまいます。

大体ですが、上下は10px前後の余白がいいでしょう。左右は5pxから10px程度の余白をとっておきましょう。


これで最初にご紹介した、よくあるサンプルフォームがどのように改善されるのでしょうか。

●よくあるサンプルフォーム改善後

お名前
フリガナ
住所

ちなみに改善前を並べてみましょう。

●よくあるサンプルフォーム改善前(一例です。)

お名前
フリガナ
住所

どうでしょうか?
すごく見やすく、項目と入力欄の繋がりがわかりやすく感じることと思います。

ASPサンプルフォームそのままをご使用の場合は、今すぐにでも改善することをおすすめします。


今日のエントリーは初歩的なEFOですので既に施策済みの方も多かったと思います。

この記事を書いた理由は、昨日とある街のポータルサイトからどのようなフォームを使用しているのかをチェックしていたところ、驚くほどデフォルトのサンプルフォームそのままを使用しているサイトが多かったからです。

ちょうど「何を入力するかわからない」というピッタリな離脱理由を説明する日でしたので、このような記事を書いてみました。

物足りなかった方には申し訳ございませんでした。。

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

フォーム離脱原因4~入力欄は簡素化する

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

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

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

今日は4番目の「情報入力に時間がかかる」ということについての解説と改善を話していきます。


フォーム内では入力に時間がかかればかかるほどユーザーのストレスは増していき、次第に別ページ・別サイトへ移動してしまうまでのストレスになってしまいます。

サイト運営者側は知りたい情報のみを取得でき、ユーザー側はサクっと入力出来るようなフォームが一番の送信率を出すことができます。

そのためには入力欄を簡素化し、ユーザーの入力時間・ページ滞在時間の短縮に努めます。

前回のエントリー「情報入力欄が多い」というのも時間がかかる要因となってしまうのですが、一項目の入力(特に思考)が長くなってしまうということも時間がかかる要因になります。

前回のエントリーも施策した上で、ここでは各項目の思考時間を短くする改善テクニックをご説明します。


改善テクニック1 : 一問一答システム風にする

これだけじゃよくわかりませんね。。
何が言いたいかを簡単に言いますと、「項目名を含め、入力欄はできるだけ分かりやすく伝えましょう。」とういことです。

「〇〇と言えば?→〇〇!」とすぐに答えが浮かぶ一問一答のように、項目名を見た瞬間にすぐに入力する内容がわかるような入力欄を作成しましょう。

項目名の長文化はストレスに繋がってしまいます。

当サイトに訪れるきっかけ
となったものはなんですか?

ではなく、

何を見て知りましたか?

のように、パッと思い浮かぶような項目名にしましょう。


改善テクニック2 : <textarea>を多用しない

<textarea>タグとは複数行のテキストを入力できるフォーム用タグです。

このtextareaばかりのフォームはストレスを向上させてしまいます。

まずは下のアンケートフォームの例を御覧ください。

●改善前

株式会社H.T.P.
へのご意見
フォームキーパー
の優れていたところ
フォームキーパー
のダメなところ
フォームキーパー
のご感想
EFOについて
のご質問

見ただけで入力する気がなくなりますよね。
これでしたら・・・

●改善後

フォームキーパー
優れていたところ

   
   
 


フォームキーパー
ダメなところ

   
   
 

その他・ご意見欄
弊社、フォームキーパー、EFOについてのご意見・ご感想・ご質問等
がありましたらお気軽に入力してください。

このように予め答えをいくつかご用意しておき、<input type=”checkbox”>等を使用することですっきりしたフォームに見せることができ、ユーザーの思考時間や滞在時間が短縮することができます。


改善テクニック3 : テキスト入力欄下に軽い説明文

上のサンプルフォーム改善後の『その他・ご意見欄』のテキストエリアでもそうなのですが、入力欄下にちょっとした説明を載せいています。

項目名を見てもわかりづらい項目や注意書きをするときなどは、“入力欄のすぐ下”に説明を追加しますと、考え易くなります。

※ よく項目名側に注意書きをしているフォームが存在しますが、入力する際の注意としては少し弱く書いているにも関わらず間違った情報が送信されてしまいます。

また説明が長すぎる場合も、すぐに頭に入らない、すべてを読まない、このようなユーザーもいますので、あくまで1、2行の“ちょっとした”説明文にしましょう。


今回のエントリーは前回と合わせて「入力時間の短縮法」として活用してください。

 →前回エントリー【複数の入力欄は離脱につながる!?】はこちらからも移動できます。

だんだんサンプルフォームが多くなり文章が少なくなりつつあります。汗

こちらの方が視覚的に分かるのでいいかなぁと思い書いているのですが、もし、もう少し文字で詳しく知りたい方がいらっしゃいましたらコメントをお願いします。

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

フォーム離脱原因3~複数の入力欄は離脱につながる!?

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

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

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

今日は3番目の「情報入力欄が多い」ということについての解説と改善を話していきます。


入力フォームはその特性上、観覧するだけの説明ページと違い、キーボードでのタイピングを多用するページですので、マウスを使う機会が増えてしまってはストレスが溜まってしまいます。

私は過去の検証から、そのマウスを使う回数(クリック数)とユーザーストレスが比例すると考えています。

つまり、フォーム内でのクリック数が多いほどユーザーは離れていってしまいます。

また、稀に商品お申し込みフォームにも関わらずアンケート欄を長々と設置したり、資料請求フォームにも関わらず年齢を入力する欄があったりと、目的とは全く関係の無い項目を設置しているフォームがあります。

このようなフォームは、ユーザーが疑心暗鬼になったり、途中で入力が面倒になったりと、フォーム送信率をダウンさせる原因となります。

つまり、入力欄は必要最低限の事だけを設置することによってクリック数が少なくなり送信率がアップします


改善テクニック1 : いらない項目がないかチェックする

上記したように、ユーザーからフォームで送信してもらいたい目的の情報とは関係の無い入力欄を設置していないかをよくチェックしましょう。

そして、関係のない項目があった場合は迷わず削除しましょう。

様々なWEBフォームを観覧していると、目的とは関係の無い項目、特にアンケート欄が多いと感じられます。

ユーザーの属性を知るためにアンケート欄を設置している場合がほとんどなのですが、その情報を聞く前に、 まずは目的の送信を完了後に聞くようにしましょう。

(大半の入力フォームには、返信メールの都合上等でメールアドレス項目は必ず設置しますので、あとでメールでいくらでも聞くことが出来ます。)


改善テクニック2 : まとめられる入力欄は結合する

入力欄を見なおしたときにひとつにできるinput要素がある場合はまとめましょう。
これだけでクリックがひとつ減ります。

例えば・・・

●改善前

お名前   
フリガナ

お名前・フリガナ項目をこのように分けているフォームは以下のように結合するだけでユーザーのクリックを2回も減少させることが出来ます。

●改善後

全角(例:山田太郎)
全角(例:ヤマダタロウ)

このように変更することによりひとつのユーザーストレスを排除することができます。

他に同じように改善できる項目で考えられるものは、

  • 住所欄を町域まで事細かく分けている場合
  • メールアドレス欄を@前後で分けている場合
  • チェックボックス欄を2つも3つも設置している場合
  • <serect>タグを多用している場合

などが挙げられます。


改善テクニック3 : わかる項目は自動で入力させる

ここからは宣伝です。笑
(ですが、効果は絶大です!)

WEBシステムを利用すれば、重複項目や決まっている項目などを自動入力させることも出来ます。

例えば、「フリガナ」や「郵便番号→住所」がそれにあたります。

名前を入力すれば自動でフリガナが入力されたり、郵便番号を入力すれば住所を検索したりと、ストレスの原因になる余計なクリック・タイピングを大幅に減らすことが出来ます。

ですが、プログラミング技術が必要になってきますので、誰にでも制作・設置できるものでもありません。

ですのでサイト制作だけ出来れば設定できるように私が変わって制作しました。

それがEFOツール【フォームキーパー】(http://www.form-keeper.com/)です。

当サイトは『無料EFO』としていますので、ここではフォームキーパーについての詳しい説明はしませんので、どのようなEFOが施策できるのかが知りたい方は、記事最下部リンクからフォームキーパーサイトをチェックしてみてください。


今日のエントリーは宣伝も混じってしまいましたが、どれも効果を発揮するEFOです。

EFOは少しの時間を使うだけで多大な効果を発揮する対策ですので、記事を参考に考えられる方法はすべて試してみることをおすすめします。

そして私的なことになりますが、喜びの声が聞けたらいいなぁと思っています。

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

フォーム離脱原因2~送信がうまくいかない場合の対処

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

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

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


今日は2番目の「送信がうまくいかない」ということについての解説と改善を話していきます。

そもそも送信がうまくいかないということは情報が届いていないということです。フォーム離脱率は100%ということになります。

これは大問題ですのですぐに改善が必要です。

改善テクニック1 : ローカル環境で確認する

これは、送信がうまくいかないことの改善テクニックといいますか、WEBページを公開する上での必須事項ですね。

何よりもまず必ず実践しなければならないことは、どんなサイトでもアップロード後は世界中のユーザーが観覧できるサイトになりますので、必ずローカル環境(アップロード前)にフォームが機能するかのチェックをするということです。

アップロードする前でしたらあなたしか観覧していませんので、どのようなエラーがあっても改善すればなんの問題もありません。

しかし、アップロードし、全世界に公開してしまってはどこで誰がフォームから送信するかわかりません。また、それが商品のお申し込みページでしたら売上を逃すことにも成りかねません。

このことはフォームページだけでなくすべてのWEBサイト/ページに言えることなのです。
“必ず公開前に確認すること”
これは肝に命じておきましょう。

このことをしっかりと実践していけば公開後に送信がうまくいかなくフォーム離脱される恐れはなくります。


改善テクニック2 : HTMLコード記述ミスを無くす

ここからがちょっとしたテクニックになります。

送信がうまくいかないときは、大抵の場合HTMLタグの記述ミスかフォームシステムのエラーになります。

システム側のエラーの場合は、使用しているASPやシステム開発者に聞いてみるのが早いかと思いますが、送信システムもテストを重ねて公開している(と思う)ので、ほぼHTMLタグの記述ミスになります。

HTMLタグの記述ミスは、WEBページ制作者側の責任(サイト制作を依頼している場合などは別)ですので、コードを見直す必要があります。

私が、「送信ができません」とお問い合わせをいただき、よく間違いを指摘する部分は

  • form要素のsrc属性
  • input要素のname属性

この2箇所です。

form要素のsrc属性は、「この送信システムを使用します」ということを表していますので、もしURLが間違っていては送信することが出来ません。

input要素のname属性は、「システムで設定した項目内容とユーザーに入力してもらう項目内容を合致させる役割」がありますので、これも間違っていては送信することが出来ません。

フォーム部分のタグを書く際は
「inputのname属性がシステム側で設定したコードとあっているかを確認する」
「formのsrc属性がシステムとつながっているか確認する」

ということを注意してみてください。


WEBフォームの送信がうまくいかない場合は、プログラムのどこかに必ず原因がありますので、ひとつずつ確認するというのが改善の最大の近道になります。

送信できないフォームは利益や信用を手放しますので、くれぐれも注意してください。

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