2015.02.18
コンバージョン率アップ！入力フォーム最適化(EFO)14のポイント
あなたのサイトの入力フォームは、お客様にとって使いづらいフォームになっていませんか？フォームはお客様のストレスを最大限に減らし、快適で分かりやすいフォームにしなければなりません。フォームの使いやすさ、つまりユーザビリティは入力完了率やコンバージョン率に大きく影響するからです。
そしてフォームのユーザビリティを上げるには、入力フォーム最適化(EFO)をする必要があります。フォームの最適化をすることでユーザビリティが向上し、コンバージョン率の向上に繋がります。そこで今回は、具体的にどのような入力フォーム最適化をすれば良いのか、改善例を元にご紹介します！
そもそも入力フォーム最適化(EFO)とは？
入力フォームからのコンバージョン率が低い場合、まずはコンテンツやデザインを見直します。しかし、あなたは入力フォームを見直したことがありますか？コンテンツやデザインの見直しも重要ですが、コンバージョンに直結する入力フォームの見直しも重要です。
入力フォームを改善しただけでコンバージョン率の向上に繋がった例は数え切れないほどあります。例えば海外サイトのFormisimo Blogによると、ボタンの色を緑からオレンジにして文言を変更しただけで55%もコンバージョン率が向上したそうです。
上記は数多くある中の一例に過ぎませんが、その重要さがお分かりいただけたと思います。このように入力フォームの改善をし、コンバージョン率の向上を図ることを入力フォーム最適化(Entry Form Optimization)といいます。
具体的に何をするのか？
入力フォーム最適化は、お客様のストレスを最大限に減らし、快適で分かりやすいフォームにすることが重要です。例えば、あなたがあるショッピングサイトで商品を購入するとします。購入画面には名前や住所などの入力項目が20項目以上ありました。
どう思いますか？おそらく「項目多いな！ちょっと面倒だなぁ…」と思いますよね。大変な入力を終えて確認画面に行くと「13項目修正してください」とのエラーメッセージ。「もういいや！」とページを離脱したくなりますよね。
極端な例ですが、これがいわゆる「ユーザビリティの低いフォーム」です。そういった使いづらい点をお客様目線で改善していくことが重要です。具体的に、どういった箇所を改善したほうが良いのか14のポイントをご紹介します！
入力フォーム全体
入力項目は必要最低限にする
名前や住所、郵便番号など沢山の項目で溢れかえっていませんか？入力項目の削減は入力フォーム最適化の大原則です。入力項目が多いと面倒くさいですよね。例えば、「どういった経緯で当店をご覧になったか」という項目がありますが、これは情報として収集する必要があれば問題ありませんが、基本的には必要ないですよね。
Imaginary Landscapeによると、対象サイトの入力項目を11項目から4項目に削減したことで、120%のコンバージョン率の向上が見られたそうです。後からでも確認出来るような項目は除外し、本当に必要な入力項目のみにしましょう。
入力ステップを明確にしよう
入力ステップが設置されておらず、お客様を不安にしていませんか？入力ステップがない方は、ぜひ付けましょう。入力ステップがないと「あとどれくらい入力するのだろう」や「いつ終わるのだろう」と不安に感じ、離脱率に影響するからです。ゴール(送信完了)がステップとして把握出来た方が、お問い合わせ自体が簡潔に思いますよね。入力ステップを明確にして、離脱を防ぎましょう。
全ての項目に必須か任意のラベルをつけよう
入力項目に必須か任意どちらか一方のラベルを付けていませんか？必須か任意か必ずどちらかのラベルを付けましょう。必須のラベルだけを付けているフォームをよく目にしますが、ではラベルがついていない項目は必須か任意どちらでしょうか？「それは任意に決まってるでしょ」と思われるかもしれませんが、それは間違いです。
私も「任意の項目」だと受け取りますが、「これは必須と任意どちらだろう…」と悩む方も多くいるのが事実です。入力を悩ませてしまっている時点で、そのフォームは使いづらいフォームです。必ずラベルを付けましょう。
適切な要素を選ぼう
項目数が少ないのにセレクトボックスになっていたり、項目数が多いのにラジオボタンになっていませんか？項目数や入力内容に合った要素(テキストボックス・チェックボタン・ラジオボタン)を選びましょう。
項目数が少ない場合、セレクトボックスよりラジオボタンやチェックボタンが最適です。1クリックで選択できるからです。逆に項目数が多い場合は、セレクトボックスにすることで項目の一覧が見やすくなります。しっかりと適切な要素を選びましょう。
リセットボタンを外そう
送信ボタンの近くにリセットボタンを設置していませんか？リセットボタンは設置しないようにしましょう。送信ボタンと間違って押してしまう可能性があり、リセットされたお客様は再入力する気がなくなってしまいます。全ての項目をもう一度入力し直すことはほとんどないですよね？リセットボタンは外してしまいましょう。
アクションが明確なボタンにしよう
ボタンをクリックしたらどんなアクションが起こるか明確になっていますか？アクションが明確なボタン(テキスト)にしましょう。クリックしたその先に何があるか分からないと不安だからです。ContentVerve.comによると「会員登録」とだけ書かれたボタンより「会員登録して人気の新着ニュースを受け取る」と書かれたボタンのほうが31%もコンバージョン率が上がったそうです。
Webデザイナーが知っておきたいコンバージョン率の高いボタンを作る方法にボタンのデザインや、適切なラベリングについて紹介していますのでぜひご覧ください。
リアルタイムで入力チェックをしよう
入力ミスがリアルタイムでチェック出来るようになっていますか？バリデーションを実装し、リアルタイムチェックを可能にしましょう。全ての入力を終え、送信ボタンをクリックした際に「以下の項目が間違っています」と沢山の項目が表示されたらいかがですか？
「うわぁ…わざわざ前ページに戻っての再入力は面倒だからいいや」という気分になりますよね。その場で、リアルタイムでチェックすることが重要です。すぐに入力ミスに気づいてもらうためにも、そして確実な入力をしてもらうためにもバリデーションを実装しましょう。
たった9行！フォームをリアルタイムで入力チェックする：jQuery-Validation-Engineで簡単にバリデーションを実装する方法を紹介していますので、ぜひご覧ください。
離脱時にアラートを出そう
フォーム画面から離脱する際に、アラートメッセージが表示されるようになっていますか？アラートメッセージを設置しましょう。途中で申し込みをキャンセルするために離脱するお客様もいますが、間違って離脱してしまうお客様もいます。お客様の操作ミスをこちらで事前に防ぐことが重要なので、アラートメッセージを設置しましょう。
入力欄
入力や選択しやすいデザインにしよう
テキストボックスやチェックボタンは選択しやすくデザインされていますか？テキストボックスは適切な高さと幅が必要で、チェックボタンやラジオボタンは比較的大きめにしましょう。
文字サイズとほぼ同じ高さのテキストボックスを目にしますが、選択しづらい上に余白がないため内容が確認しづらいですよね。チェックボタンやラジオボタンも同様で、小さいと選択しづらいですよね。
選択や入力しやすいデザインが重要です。またチェックボタンやラジオボタンは、ボタン横のラベル(文字)をクリックした時でもチェック出来るようにしておきましょう。
キーボード設定を合わせよう
スマートフォンサイトでのメールアドレスの入力時や郵便番号の入力時に、それぞれ適切な文字種に自動的に変わるようになっていますか？入力欄にはtype属性を使用して、キーボード設定を合わせましょう。
例えば郵便番号は数字以外を使うことはありませんよね。郵便番号を入力しようとした際に、キーボードが日本語であれば数字に切り替えなければなりません。「そんなのすぐ出来るじゃん」と思われるかもしれませんが、スマートフォンではこの切り替えを繰り返すのが意外と面倒なのです。入力欄にはtype属性を指定することで、切り替えの手間を減らしましょう。
下記は、HTML5から追加されたものです。input要素のtype属性を指定することで、自動的にキーボードが切り替わります。例えば、type属性に「email」を指定すると最初から入力モードが英数字になります。
|
1 2 3 4 5 6 7 |
<input type="tel"> <input type="email"> <input type="url"> <input type="password"> <input type="date"> <input type="time"> <input type="number"> |
プレースホルダーをつけよう
項目に対してどのように記入すれば良いのか、分かりやすく例を上げていますか？テキストボックス内、または直下にプレースホルダー(ここでいうと入力例や説明文)を記載しましょう。項目名があっても、「この記載で良いのかな」とお客様は不安になります。例を上げることで「この記載で間違いない！」と不安を取り除いてあげましょう。
下記はHTML5で追加された「placeholder」属性です。指定の文字列が入力欄内に薄いグレー色で入力例として表示されます。
|
1 |
<input type="email" placeholder="アドレスを入力してください"> |
半角・全角を指定しない
電話番号や郵便番号の入力欄は、半角・全角の指定をして使い勝手を下げていませんか？入力欄は半角・全角のどちらも入力可能なようにしておきましょう。ネットに慣れている方であればミスすることは少ないと思いますが、半角・全角の入力ミスは意外と多いものです。これだけでコンバージョン率が低下していると勿体ないですよね。
住所は郵便番号から自動検索しよう
郵便番号を入力しても、住所欄が自動的に入力されないフォームになっていませんか？郵便番号を入力すると、住所欄が自動的に入力されるようにしておきましょう。住所は他の項目に比べて文字数が多いので、入力が面倒ですよね。使い勝手向上のためにも、郵便番号検索を有効にしておきましょう。jQuery等を使用して簡単に実装することが出来ます。
直近の日付に関する入力はカレンダーで
配達希望日や納品日など、直近の日付に関する入力はカレンダーで選択出来るようになっていますか？わざわざ年月日をテキストボックス、またはセレクトボックスに入力するのは大変手間です。カレンダーから日付を選択してもらえば、たった1クリックで選択できます。カレンダーの導入方法については超簡単！カレンダーから日付入力する方法：jQuery ui Datepickerをご参照ください！
まとめ
いかがでしたか？コンバージョン率に悩んだ時は、コンテンツやデザインを見直すことはもちろん重要ですが、意外と盲点である入力フォーム最適化をぜひ行いましょう。入力フォーム最適化をするだけでコンバージョン率が大幅に改善した例もご紹介しましたが、入力フォーム最適化がいかに重要かお分かり頂けたと思います。
入力フォーム最適化をすることで、入力完了率とコンバージョン率を上げましょう！こういう細かい気遣いが面白いのも、Webデザインならではですよね。
