あなたはできる限りのことをします ウェブサイトを作成する 訪問者をコンバージョンに導きます。 分析を研究すると、作成したユーザー ジャーニーが訪問者によって何度も何度もサポートされていることがわかり、わくわくします。 ただし、変換を妨げるものがあります。
Le お問い合わせフォーム 訪問者の旅の重要な部分です。 ウェブサイトが提供できるほとんどすべてのものを実際に持っていたとしても、 お問い合わせフォーム 正しく使用しないと、エクスペリエンスが台無しになる可能性があります。 「壊れた」ボタン、わかりにくいフィールド、多すぎる手順、整理されていないインターフェイス... お問い合わせフォーム ユーザーエクスペリエンスを混乱させる可能性があります。
間違っていることが多いことがたくさんあります。
完璧な連絡先フォームを作成するための5ルール
2014 年に公開された Google のアイ トラッキング調査によると、デザインの最も基本的な使用ガイドラインに従うこと フォーム ユーザーエクスペリエンスを大幅に向上させます。 具体的には、お問い合わせフォームがすべてのルールを満たしている場合、ユーザーの 78% が 42 回の試行で入力して送信できます。 ただし、コンタクト フォームがこれらのルールに違反している場合、XNUMX 回の試行で違反できるのは XNUMX% のみです。
これらのルールが何であるかについて興味がありますか？ だから読み続けてください。
ルール＃1：アライメントに焦点を当てる
ここの他のルールでわかるように、人々はしばしば フォーム 多くの場合、不適切な設計の選択につながります。 たとえば、アラインメントの問題を考えてみましょう。
BrainTrafficのWebサイトでこのようなフォームが表示され、次のように思われるかもしれません。うーん…でも、完成するには少し長すぎませんか？
この「問題」の解決について考えるXNUMXつの方法は、ラベルを左に移動し、回答フィールドを右に配置することです。 ただし、UXの専門家は、フォームをスキャンする機能が損なわれるため、これは大きな問題ではないと言うでしょう。 フィールドを水平に並べて配置することを考えた場合も同様です。
あなたがしたい場合 フォーム コンタクトがアライメント基準を満たしている場合、次のことを行う必要があります。
- すべてのラベル、フォームフィールド、および主要なアクション呼び出しボタンを左揃えにします。
- 関連するフィールドを水平方向に揃えないでください。 フォームは論理的に構成できますが、各質問またはフィールドは垂直に積み重ねる必要があります。
- 多肢選択式の質問（6つ未満のオプション）があるフィールドは、ドロップダウンメニューではなく、ポイントまたはチェックボックスの垂直リストに表示する必要があります。
ルール2：すべての関連フィールドを含める
お問い合わせフォームのデザインに関しては、短いほど良いと思うかもしれませんね。 常にそうであるとは限りません。 最も重要なのは、必要かつ関連するすべてのフィールドをユーザーに提供することです。
UnbounceのシニアコンバージョンオプティマイザーであるMichaelAagaardは、 プレゼンテーション この問題に対処した2015年。 彼と彼のチームは、このお問い合わせフォームを短くするとどうなるか知りたがっていました。
ご覧のとおり、フォームへの入力プロセスを合理化するために、不要なフィールドと思われるものを削除しました。 ただし、テストの終了時に、短い形式でのコンバージョンが14％減少することがわかりました。
ルール番号3：フィールドを簡素化
ユーザーがデスクトップまたはモバイルデバイスを使用して連絡フォームを操作しているかどうか、またはユーザーを支援するための支援テクノロジーが必要な場合は、フォームを装備する必要があります。入力プロセスを簡素化するため。
知っておくべきテクニックは次のとおりです。
作表
デスクトップユーザーやアクセシビリティの問題があるユーザーの場合は、お問い合わせフォームで論理的なタブ順序が有効になっていることを確認してください。
入力マスク
特定のフィールドをどのようにフォーマットするかをユーザーに推測させるのではなく、自動的にフォーマットする入力マスクを使用してフィールドを追加できます。
Googleオートコンプリート
各フィールドを次のようにコーディングするのではなく ギ 尊重される基準に従って自動的に、Googleアドレス自動入力プラグインを使用して自動入力をアクティブにします。 これにより、スペルミスや誤って入力されたアドレスに対処する必要がなくなるだけでなく、訪問者がこの情報のほとんどを入力する必要がなくなります。
ルール番号4：すべて終了
このルールはミニマリズムの基本原則に反することは承知していますが、訪問者を不必要に苛立たせないように細心の注意を払う必要があるルールです。
説明させてください：あなたはかなり簡単に見えるお問い合わせフォームを持っています。 ユーザーはラベルの提案に基づいて記入し、送信ボタンをクリックします。 それから彼らはこの恐ろしい赤いメッセージを受け取ります：「あなたはそれを正しくしませんでした！ 戻ってフォームを修正し、返送してください。 「」
あなたはおそらくユーザーとしてそれを経験し、特にエラーがスローされたときに入力した情報の一部が削除された場合に、それがどれほど苛立たしいものになるかを知っています。 したがって、何をどのように修正する必要があるかをユーザーに推測させるのではなく、この時点に到達させないでください。 途中ですべてを綴る：
- ユーザーがフォームに記入する場所を正確に把握できるように、フィールド（特にモバイル）に焦点を当てます。
- 入力マスクを使用してフィールドを自動的にフォーマットしない場合は、すべてのフォーマット要件を書き留めてください。
- フィールドが「オプション」の場合を明示的に示します（赤いアスタリスクではなく、単語を使用します）。
- ユーザーが入力するときにパスワードフィールドを表示または非表示にするオプションをユーザーに提供します。
- ユーザーがフィールドに参加するとすぐにエラーメッセージを表示します。 それをするために最後まで待たないでください。
ルール＃5：アドバイスを隠さない
問い合わせフォームのボードテキストは次のようになります。
Targetがどのようにラベルをフィールドに配置するかをご覧ください。 一部の連絡フォームでは、ユーザーがフィールドをクリックすると、これらのラベル/表示が単に消えます。 ターゲットはこれを少し異なる方法で処理し、ラベルをフィールドボックスの上部に移動します（「電子メールアドレス」を参照）。
これがどのように処理されるかに関係なく、グループのようなユーザビリティの専門家 ニールセン・ノーマン、 これは悪い設計慣行であることがわかります。理由は次のとおりです。
- これは、次の分野のマルチタスク、気が散る、またはペースが速すぎるユーザーにとっては問題があります。 手がかりが消えたら、ユーザーは必要なものを再発見するためにフィールドを離れる必要があります。
- また、ヒントが消えると、ユーザーがフォームに戻って作業を確認したり、応答を完全に削除せずにエラーを修正したりして、以下の内容を確認できなくなります。
- プレースホルダーのヒントに使用される明るい灰色のテキストは、読みやすいものではありません。
- ヒントテキストのあるフィールドは、すでにデータが入力されているフィールドと混同される可能性があり、ユーザーはそれらを無視してフォームを送信し、エラーメッセージを受け取ることになります。
- 一部の画面読み取りツールは、ヒントテキストを読み取ることができません。
NNGによると、ユーザーは手がかりのテキストを含むフィールドよりも空のフィールドの方が魅力的だと感じています。 フォームがこれらのラベルまたは記述子をフィールドの上に配置するのが長く見える場合でも、使いやすさが向上します。
これらのヒントは以上です。より良いお問い合わせフォームの作成に役立つことを願っています。
