フォームを4つのゾーンに分けた考え方

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

先日、以下のご質問をいただきました。

いつもブログを拝見させていただいております。〇〇と申します。

素朴な疑問なのですが、よく「項目」や「入力欄」というような言い方をしていますが、どこを示しているのですか!?

貴ブログを参考にフォーム改善に取り組んでいるのですが、いまいちわからない表現があります。

お忙しいとは思いますが、ご返答宜しくお願いいたします。

※ 一部省略

ありがとうございます。また、お手間を取らせてしまい申し訳ございませんでした。

他にもわからない方がいらっしゃるかも知れませんので、今回は頂いたご質問についてサイト上でお答えします。


そもそも私はフォームをいくつかのゾーンに分けて捉えています。

まずは、下の図を御覧ください。

ゾーン別フォーム
※ フォームキーパーのお申し込みページを例に取りました。

①、項目ゾーン

何を入力するための場所かを表示している項目欄を置くゾーンです。

②、入力欄ゾーン

実際に送信する情報を入力する <input> や <textarea> タグを置くゾーンです。

③、フォーム全体ゾーン

<form>から</form>までのフォーム全体に関わるゾーンです。

④、その他フォーム外ゾーン

各ゾーンに当てはまらない、フォームページ全体です。

フォーム外のテキストや画像がここに当てはまります。


このように4つのゾーンに分けて考えますと、どこが悪いのか、改善ポイントが簡単に見つけることができます。

すでにいくつかのエントリーをご覧になりご存知の方もいると思いますが、当サイトでもこのようにフォームを4つのゾーンに分けた考え方の改善をご説明しています。

フォーム改善に取り組む際はゾーンに分けて考えますとわかりやすくなりますのでこの方法をおすすめします。

短いですが、今日は以上になります。

ご質問メールやコメントをいただけましたら、このように当サイト内でお答えいたしますので、フォーム改善、EFOについてご質問のある方は『お問い合わせ』または『コメント』にて受け付けています。

お気軽にご連絡ください。

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

フォーム幅・高さによって送信ボタンが押されるかが決まる!?

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

別の仕事(Movable TypeからWordPressに移行)に没頭し、ここ2日間の更新が出来ませんでした。。毎日ご覧いただいていた方には、更新がなくすみませんでした。

記事数が多いのと作り方に問題があり、40時間はかかってしまいました。。。

ところで、世間では連休らしいですね。
長いところは9連休だとか・・・

羨ましい限りです。

さて、
前置きが長くなりましたが、今日はフォーム全体のサイズについての話をします。


あなたはフォームの横幅・縦幅をどの程度にしていますか?

このフォームサイズも離脱率を左右するポイントになりますので抑えておきましょう。

まずは横幅からです。

ベストなフォームサイズ・・・width

フォームの横幅はページ全体(コンテンツ部)の7~80%程度がいいでしょう。
(一般的に<table>タグで作られますが、そのtableタグのサイズです。)

フォーム自体の幅といいますか、フォーム部の幅ですね。

初めに幅の違うフォームを並べてみます。

ここでは、幅40、60、80、100%を並べてみました。

下から2番目の80%が一番見やすく、またストレスなく入力できるのではないかと思います。

これに他項目が加わりますとさらにわかります。

チェック
項目
 

 

 
チェック項目  
 

 
 

上が60%、下が80%のwidthを指定しています。

ここまで項目が完成すると、やはりwidth80%がストレスなく入力できます。

特にチェックボックスやラジオボタンを設置しているフォームは、テキストも同時に入れなければなりません。
そのテキストが2行になっている場合などはストレスになりますのでフォーム幅を広く取る必要があります。

また、フォーム幅が広すぎる場合は、『項目→入力欄』と、視点を右左に動かさなければならなくなってしまい、ミスも増えれば頭も痛くなってしまいます。
ですので広すぎるのもNGです。

やはり80%から小さくても70%程度に抑えるのが送信率の高いフォームと言えます。

ベストなフォームサイズ・・・height

次に高さです。

フォーム全体が1ページ(表示後に見える範囲)に収まっているフォームが送信率が高いです。状況によって、もしそれが不可能な場合は1スクロール以内に済むようにしましょう。

(長くなってしまいますので、ここではサンプルフォームを出しません。)

ユーザー環境によりブラウザで見るサイズは様々ですので一概には言えませんが、ベストは800px程度と言えます。

※ ここで言うベストサイズは、入力ボタンまで含めての範囲です。

なぜかといいますと、これには視覚的な問題が絡んできまして、スクロールをしていっても項目が残っていて入力の終わりが見えない場合は、「長すぎる」というイメージが付いてしまい入力途中に離脱してしまう恐れがあります。

それを感じるのが2スクロール目ぐらいからですので、最高でも1スクロール以内という訳です。

逆に短すぎる分にはストレスを与えません。横幅とは違い大歓迎と言えるでしょう。

むしろ短ければ短いほど良いと言えます。

注意していただきたいのは1ページ(1スクロール)内に強引に収めようと思い、余白をなくしたりtextareaの縦幅を極端に小さくする、ということではありません。

見づらくなってしまうのはさらに余計なストレスを与えますので、あくまでも目安として捉えてください。


まとめますと、送信されやすいフォームは
『width 80% 程度』、『height 800px 程度』
ということになります。

パチパチサイズがフォーム離脱率を下げる!!

とでも覚えておいてください。。。汗

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

フォーム【項目】改善8つの方法

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

現在効果の出ている項目全体についての改善案をまとめました。


1、不要な項目は削除する

当サイトでは何度も言っていますが、

  • お申し込みフォームに「年齢項目」 や、
  • 資料請求フォームに「どこからサイトに訪れたか」 等

というような、本来の目的とは関係のない項目がある場合、送信率は下がってしまいます。

今一度フォームを確認し、目的のために必要な項目以外は削除しましょう。

2、項目の順番を変えてみる

項目の順番は、送信ボタンを押されるまでスムーズに辿り着かせるポイントになります。

メールアドレスと住所の順番を入れ替えたら送信率がアップしたという程度のことはよくある話で、お名前より先にメールアドレスを設置したら送信率が良くなったという話も聞きます。

あなたの考えている固定観念に捕われず、フォーム項目の順番を変化させてみましょう。

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

これも以前のエントリーで説明済みです。

詳しくは『labelの必要性』をご覧ください。

4、文字サイズを考える

ユーザーによってお気に入りの文字サイズはまちまちです。

最近では大きい文字よりも小さい文字のほうが好まれる傾向にあります。

あなたのサイトユーザーにあった文字サイズを見つけ出しましょう。

5、余白を考える

これも文字サイズと共に修正が必要になります。

フォーム全体が1スクロール以内に済むように余白の調整もしましょう。

6、背景色を考える

フォーム内、特に項目名は背景色を変更させることによって分かりやすく変化します。

サイトデザインやユーザー属性にあった背景色を設定しましょう。

7、文字色を考える

基本はサイトのテキストと同色がわかりやすいですが、フォーム内の文字色を変更したことによって送信率が上がったというおはなしも聞くことがあります。

8、フォントを考える

これも基本はサイトのテキストと同フォントがわかりやすいですが、場合によっては送信率の増加が考えられますのでテストしてみる価値はあります。


今日は項目のみのフォーム改善案でしたので、次回は他の改善案も取り上げてみたいと思います。

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

レンタルカート(ASP型)からCGI型カートへの引越しを考える

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

前回の記事でレンタルカート(ASP型カート)ではEFOは施策できないということをお伝えしました。

では、「ショッピングカートを使用しているショップはEFOを施策することは出来ないのか?」
という疑問が生まれてきます。

先に答えを言いますと、複数点を扱うショップのカートページもEFOを施策することが出来ます

それを可能にするのがCGI型のショッピングカートです。

簡単に説明しますと、
今まではショッピングカートを提供しているASPのサーバやシステムを使用してあなたのショップに『カゴ』と『レジ』を用意していました。

それが、CGI型のショッピングカートでは、
あなたのサーバ(レンタル含む)に『カゴ』や『レジ』などのショッピングカートシステムを置くことが出来るようになります。

ASP型とCGI型のカートとサーバ

自分のサーバにショップサイトからショッピングカートまでを格納することが出来ますので、レジページもカスタマイズすることができるようになります。

そして、このCGIショッピングカートであなたのショップをどのように変化させることができるのかをご説明します。

CGI型ショッピングカートの利点

ショップページと同じデザインにできる

ASPは、背景色・決まった背景パターンへの変更やロゴのみは挿入することができますが、ショップページと全く同じ背景やレイアウト等にすることはできません。

しかし、CGI型はそれが可能となります。

ショップページと同じドメインにできる

ASPは、ショップページURLが http://www.shoppage.com/ だとしたら、カート内やレジページのURLは https://www.asp-url.com/ のように違ったものにドメインになってしまいます。

これを、ショップもカート内もレジも http://www.shoppage.com/ から始まるURLにすることができます。

EFOが施策できる

先程お伝えした通り、HTMLやシステムをカスタマイズできますので、EFOを施策することができるようになります。

信頼あるショップになる

カート内へ移動した瞬間に背景が変わってしまう場合やドメインが変わってしまう場合などは、直感的に「あれ??」と感じるユーザーが多く、信頼度ダウンにつながってしまいます。

その違和感を取り除くことができますので、さらに信頼あるショップにすることができます。

売上アップに貢献

ネットでの“信頼”は口コミに変化し、それは確実に売上につながっていきます。

総合しますと、カートを変更するだけで信頼あるショップが作れ、今以上に顧客満足度・売上ともにアップさせることが可能となります。

・・・ですが、もちろんこんなうまい話だけではありません。

次にがっかりするほうのデメリットをご説明します。

CGI型ショッピングカートのデメリット

設置が大変

ひとつのWEBシステムを導入するということですので、サーバやCGIについてのある程度の知識を持っていないと設置することが難しいです。

設置代行をセットで受け付けている業者もありますが、その場合はプラスのコストがかかってしまいます。

SSLを導入する必要がある

個人情報をご登録いただくレジページもサーバ内に設置するので、送信を暗号化するSSLを導入する必要があります。

これにより、年間数万円から数十万円のコストが必要になります。

ASP型よりコストがかかる

ショッピングカートを設置しているということはECサイトですので、やはり利益を考えなくてはなりません。

ここまで説明したように、今以上に売上は上がるが今以上にコストがかかります。
ですので、CGIカートを使用する前に費用対効果を考える必要があります。

『費用』は、設置方法(業者に依頼or自分でやるか 等)やカートシステム(商品点数や必要な機能 等)によって必要なコストが大きく変わってきますので、どの程度必要か一概には言えません。

ですが『効果』は、売上130%程度になると考えていただければわかりやすいと思います。
※ 場合によって値は変化します。


トータルで見て、ショッピングカートの必要なECサイトを制作する際には、CGI型のカートを設置することを私はおすすめします。

確かに簡単に始められるASP型が楽ですが、ショップを作りこんでいけばいくほどレンタルカートに不満を感じ、自由度の高い埋め込み型のショッピングカートへの移行を考えます。
引越しを依頼されるクライアントも少なくありません。

あなたが『信頼ある、利益になる、継続させるネットショップ』を制作したい場合は、CGI型ショッピングカートへの引越しを考えてみてはいかかでしょうか。

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

レンタルカートのEFO・フォーム改善

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

「レンタルカートのEFOはどのように施策すればよいのか!?」
というご質問をいただきましたので、今日はその答えと情報について公開したいと思います。

質問をいただいた私の回答は一言。

「レンタルカートでEFOは施策出来ません。」

というのも、EFOを施策するためには、フォームを置いているページのHTML・CSSを修正できることが大前提です。

しかしほとんどのレンタルカートは、システム、サーバ、ファイル・・・その他諸々がすべて完成しているものであり、ユーザー側で修正することは出来ません

【カートへ入れる】ボタンから【レジページ】HTMLファイルを変更できる、俗に言う『HTML埋め込み型』と言われるレンタルカートが存在すればEFOを施策することが出来るのですが、私は見たことがありません。

ですのでこのような答えが出ました。

ただし、例外があります。

レンタルでも実際にはレンタルしていないカートも存在します

『レンタルカート』というと、その名の通り『他社サービス・サーバをレンタルしているショッピングカート』という意味になります。

しかし、自サーバ(レンタルサーバ含む)に格納できるタイプのショッピングカートも稀にレンタルカートと呼ばれている場合があります。
(これはレンタルカートと呼ぶほうが認知度が高いからそう呼んでいるだけかと思います。)

メールフォームシステムにASP型とCGI型があるように、ショッピングカートにもASP型(レンタルカート)とCGI型(インストールカート)が存在します。

ASP型とCGI型の違いはこちらの記事を参考にしてください。
通常の入力フォームの記事ですが、考え方はショッピングカートも同じです。

業者にサイト制作を依頼した等で、自サイトがどちらのタイプかわからない場合は、運営ショップのレジページのアドレスバーをチェックしてみてください。

CGI型は、自サイトドメイン(例:http://www.uneisaito.com/)と同じドメインがレジページに使われています(例:https://www.uneisaito.com/cart/)。

ASP型は、自サイトドメイン(例:http://www.uneisaito.com/)と違うドメインがレジページに使われています(例:https://www.cart-asp-domain.com/cart/)。

これらをチェックしてみて、“レンタルカート”ではなく“インストールカート”でしたら、レジページのカスタマイズも可能ですのでEFOを施策することが出来ます。

つまり、フォーム改善出来るのがCGI型で、出来ないのがASP型ということになります。

ここでショッピングカートでEFOを施策するにあたり必要なことをご説明します。

ショッピングカートEFOを施策するために必要なこと

  1. HTMLファイルの改善
  2. HTMLファイルのデザインを担当するCSSファイルの改善
  3. フォームのサーバにFTP接続できる

CSSはHTMLに記述することもできますので、「HTMLファイルの改善ができる」ということと、「フォーム格納サーバにFTP接続ができる」という2つが最低条件になります。

もし「HTMLファイルは改善することができるがFTP接続ができない」というカートですと、改善したファイルをアップロードできない上、フォームキーパー等の入力支援システムを導入できません。

また、「FTP接続はできるがHTMLファイルを改善できない」というカートですと、ブラウザでの見た目の入力欄や項目の改善ができませんのでEFO施策は困難になります。

結局今のカートでEFOを施策できるのか!?

結論を言いますと、上記を参考に自サイトがどちらのタイプに属するかをチェックし、ASP型のレンタルカートを使用している場合は、フォーム改善(EFO)を施策することは出来ません

おそらく当ページへ訪れた方はASP型を使用していると思われます。
ですので、現時点ではEFOは施策できません。

もし、ショッピングカートを改善し費用対効果をアップさせたい場合は、ショッピングカートシステム自体の変更を考えることが必要になります。

カートを変更することで制約が2倍3倍なんてことはよくある話で、レジページを自サイト用にカスタマイズしただけでご注文率が驚異的に変わってきます。

変更には初期コストがかかってしまいますが、レンタルカート使用料金をマイナスし、3,40%の売上アップで利益向上が見込まれるようでしたらCGI型カートに変更したほうが得と言えます。

この機会にお客様の満足度をアップさせ、さらに利益も拡大するCGI型の使用を考えてみてはいかがでしょうか。

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

P.S.
この記事を読むとCGI型の方が断然いいのではないかと思われるかも知れませんが、そうではありません。ASP型にもいいところはあります。

ASP型の一番の利点は、『セキュリティの心配がいらない』ということです。
(正確にはいらないというよりは、ASP側で管理されているということです。)

これにつきましては次回
「レンタルカートからインストールカートへの引越し」で詳しくご説明します。

うさぎがフォーム内でナビゲーション

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

前回、フォームページトップのナビゲーションにうさぎを使用し、フォームまで辿り着かせるという話をしました。

今回はフォームに辿り着いた後、フォーム内のナビゲーションにキャラクターを使用するという話です。
キャラクター例はもちろん、我が家のうさぎです。

主役は疲れる・・・

はい。
疲れきっています。笑

今日で終わりですので頑張ってもらいましょ。

フォームでうさぎが注意する

最近のフォームでは、エラー警告をページ内で表現するサイトも増えてきました。

ですが、送信率アップを考えると、ただページ内で表示させれば良いというものでもありません。
警告の出し方を考えないと逆にユーザーが離脱してしまいます。

・いかにも危険そうな警告(真っ赤な背景 等)
・頭に来そうな警告(絶対に入力しろ! 等)
・何が言いたいのかわからない警告

このようなエラー表示は、ユーザーのストレスになり、送信ボタンまで行き着くことがなくなってしまいます。

そこで今日もうさぎクンの登場です。

ユーザーストレス軽減のためにキャラクター付きの警告を出すことによって、間違っていることを優しく伝えられ、送信までつなげさせることができます。


このようにエラー警告の出し方も、ただ文字だけではなくキャラクターをつけると優しく感じられます。

見ているだけでなごむ『動物』や『赤ちゃん』は、特にストレス軽減効果が強いです。

サイトのキャラクターや商品のモチーフに動物や赤ちゃんを使用しているのも少なくありません。もしあなたのサイトにキャラクターが使用されていないようであればこれを機に考えてみるのもいいと思います。


フォームによっては、前回・今回エントリーのような対策により離脱率が減少する場合もあります。

また、最近はバーチャル人間がナビゲーションや入力エラーの警告をしているフォームも存在します。

キャラクターを持っていないようなサイトや使用したくないサイトでは、人間によるナビゲーションも送信率アップの効果は期待できます。

フォームエラー警告一つでも、あなたのサイトに合った表示方法をさせることにより、送信率アップはもちろん顧客満足度も向上させることができ、リピーターを増やすことも可能です。

この記事を参考に小さな所にまで気を使うサイトを制作いただければと思います。

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

P.S.
今回のエントリーは思ったより短くなってしまいました。。
→前回の記事はこちらからでもご覧いただけます。