コンバージョン率を向上させるためのオンラインフォームを作成するためのヒント

オンラインフォームはさまざまな目的に使用できます。 ニュースレターへの登録、ウェブサイトへのアカウントの登録、購入、または単なる問い合わせのいずれであっても、必要な情報を入力することに慣れています。

ただし、オンラインフォームの使用感が悪いと、ユーザーはタスクを完全に放棄して別のWebサイトにアクセスするように促される可能性があります。

モバイルサイトの使用が増え続け、Googleの最近のモバイルフレンドリーなランキングアルゴリズムの更新により、モバイルデバイス用のユーザーフレンドリーなフォームを作成することがこれまで以上に重要になっています。 私たちは皆、そのデバイスでは使用できない電話のフォームに記入しようとすると、非常にイライラすることに関係していると確信しています！

変換プロセスの最後のハードルで潜在的な顧客を失うことを避けるために、デスクトップとモバイルの両方でユーザーフレンドリーなオンラインフォームを作成するためのヒントを次に示します。

1.レイアウト

当たり前のように思えるかもしれませんが、オンラインフォームにすっきりとしたシンプルなレイアウトを使用すると、カスタマージャーニーが可能な限りスムーズになり、より多くの人がすべての情報を入力するようになります。 House of Fraserのこの例のような垂直レイアウトは、よりユーザーフレンドリーです。

ただし、Travel Republicの次の例のように、水平レイアウトも機能します。

重要なのは、それをシンプルに保ち、必要な情報を取得するためにできるだけ少ないフィールドを使用することです。

モバイルユーザーにとって、これは特に重要です。 記入に時間がかかりすぎると、ユーザーはフォームを放棄する可能性がはるかに高くなります。

スターバックスには、モバイルサイトでアカウントを作成するためのクリーンでシンプルな垂直フォームの良い例があります。

オンラインフォームから通常のナビゲーションオプションを削除すると、フォームをクリーンでシンプルに保つのにも役立ちます。 たとえば、フォートナムとメイソンはページ上部からメニューを削除し、チェックアウトオプションページの「セキュアチェックアウト」バナーに置き換えました。

これにより、フォームがきれいに保たれるだけでなく、変換プロセスを開始した後、ユーザーがWebサイトの他の部分にジャンプして戻るのを防ぐことができます。 フォートナムとメイソンが提供しているように、ゲストチェックアウトオプションを持つことは、eコマースWebサイトにも推奨されます。 ユーザーは、迅速な購入を行う際に、アカウントを作成するためにすべての個人情報を提供することに気が進まない場合があります。

2.フィールドラベルと入力方法

必須フィールドに明確にラベルを付けることが重要です。 ユーザーがフォームを放棄する原因となる可能性のある入力エラーを回避するために、わかりやすいラベルを使用してください。 必要に応じて、混乱を避けるためにフィールドの説明を含めてください。 OK Magazineのオンライン登録フォームの「スクリーン名」フィールドに、この例があります。

各フィールドに使用するのに最適な入力方法を考えてください。 さまざまなタイプがあります。

• 入力フィールド
• チェックボックス
• ボタン
• カレンダー
• ドロップダウンメニュー

ほとんどの場合、どちらの方法が最適かはおそらく明らかです。 ただし、モバイルフォームに関しては、いくつかの方法を避けるのが最善です。 たとえば、WWFのモバイルサイトにはこのフォームがあり、ユーザーにとっていくつかの問題があります。

はい/いいえボタンは間違いなく小さすぎて、指先で簡単に選択することはできません。 これに加えて、青いセクションの[これはギフトです]チェックボックスはほぼ完全に隠されています。 このフォームは、モバイルデバイスで入力しようとするとイライラします。

一方、Expediaは、カレンダーの入力方法がモバイルデバイスに十分な大きさであることを保証します。

3.プロセスを計画します

オンラインフォームが長くなりすぎていることに気付いた場合は、ユーザーが利用できるように、フォームを複数のページに分割することを恐れないでください。 これを行う際の鍵は、最初からユーザーのプロセスを計画することにより、ユーザーの期待を管理することです。

Confused.comにはこの良い例があり、ページの上部にさまざまなステージが明確に番号が付けられています。

TimesのWebサイトでは、フォームのさまざまなステップがわずかに異なる形式で表示されます。 これは、オンラインアカウントにサインアップするフォームの最初のページです。

下にスクロールすると、次の手順が表示されます。

フォームの長さが最初からユーザーに明確にされている場合、ユーザーはフォームに記入するのに十分な時間があるかどうか、または後で戻ってくる必要があるかどうかについて、情報に基づいた決定を下すことができます。 これにより、通常は長いフォームに関連する問題が回避されます。これにより、ユーザーはフォームへの入力を開始しますが、長さに不満を感じてタスクを放棄するだけです。

4.助けになる

前のOKMagazineの例と同様に、Barclaycardには、オンラインバンキングのログインフォームに必要な情報を正確に説明するより詳細な例があります。

バークレイカードは、必要な情報を説明するだけでなく、入力できる情報の種類に関するオプションをユーザーに提供します。 これは、たとえば、ユーザー名またはID番号を思い出せないが、カードを持っていて、代わりにこの番号を入力できる場合に役立ちます。

また、両方のフィールドに「忘れられた」オプションを提供します。 これは現在、オンラインログインフォーム全体で標準として期待されていますが、これらのオプションが利用できない場合は非常にイライラする可能性があるため、注目に値します。

ユーザーに役立つもう1つの方法は、情報を使って何をしているのかを正直にすることです。 Virgin Activeは、オンラインのお問い合わせフォームでこれを行います。

Virginの「電話をかけるためにあなたの番号だけを使用するという約束」は、彼らがあなたの電子メールアドレスで何をしようとしているのかをカバーしていませんが、ユーザーにいくらかの安心感を提供します。

[続行]または[送信]ボタンをクリックする前に、各ボックスに入力した後に記号を付けて、エラーなしで各フィールドに正しく入力したことをユーザーに知らせます。 緑色のチェックマークと赤い十字を使用して、オンライン登録フォームにこの例があります。

エラーがある場合は、関連するフィールドの横に明確にマークを付け、必要に応じて何が必要かを説明します。 このようにして、ユーザーは最初のクリックでフォームが受け入れられることを確認できます。

5.常にテストしてください！

オンラインフォームを作成するときは、起動する前に、できるだけ多くのデバイスで自分でテストしてください。 すべてのフィールドが機能することを確認するために、できるだけ多くの異なる方法でフォームに記入してください。

オンラインフォームはあなたのウェブサイトにとって貴重なツールです。 データの取得、販売の処理、問い合わせの受信など、変換を完了するにはフォームが必要です。

この時点で、訪問者に購入/サインアップ/登録などを促すためのハードワークのほとんどを完了しました。オンラインフォームのような単純なものがそのすべての重要な変換の邪魔にならないようにしてください！