お問い合わせフォームは、多くのWebサイトの重要なコンポーネントです。 それらは一般的に簡単ですが、リードを収集してユーザーと連絡を取り合う場合は、使いやすいことを確認する必要があります。 これは通常、オフィストラフィックの問題ではありませんが、モバイルデバイスを使用している場合、フォームの使用は難しい場合があります。
このチュートリアルでは、モバイルフレンドリーなフォームを設計することの重要性について少し説明します。 次に、フォームがモバイルデバイスでスムーズに機能するようにするためのXNUMXつのヒントを紹介します。
仕事に出ましょう！
フォームがモバイルフレンドリーであることが重要な理由
フォームにはさまざまな形とサイズがあります。 ほとんどの場合、お問い合わせフォームを扱います。
登録（サブスクリプション）フォームも非常に人気があります。これにより、キャンペーン中にメールを収集してターゲットにすることができます。
ただし、フォームは他のあらゆる目的に使用できます。 たとえば、次を使用して情報を収集できます オンライン調査またはアンケート 、その場合、ユーザーが回答を入力できるフォームが必要になります。
言い換えれば、フォームは非常に用途が広く、ほとんどすべてのサイトが何らかの方法でフォームを使用しています。 したがって、フォームが使いやすいことが不可欠です（訪問者に苛立たしい体験を提供したい場合を除く）。
通常、デスクトップまたはラップトップコンピューターからフォームを使用するのは非常に簡単です。 あなたは完全なマウスとキーボードを持っているので、使用したいフィールドを選択してデータを入力することは問題ではないはずです。 ただし、スマートフォンやその他のコンパクトなデバイスからWebを閲覧するのは複雑です。
小さな画面で指を使って作業する場合、デザインの決定が不十分なため、フォームを操作するのが難しい場合があります。 これはあなた自身のデザインでは避けるべきものです。 結局のところ、モバイルユーザーがフォームを操作できない場合、コンバージョンやリードを失ったり、訪問者を苛立たせたりする可能性があります。
モバイルトラフィックは、デスクトップソースよりも重要であるとは言えないまでも、今では重要であることを理解することも重要です。 実際、近年、モバイルトラフィックはすでに後者を上回っています。 つまり、新しいプロジェクトを開始するときは、モバイルフレンドリーなWebサイトを設計することが主な目標になるはずです。
使いやすいモバイルフォームを設計するための5のヒント
幸いなことに、モバイルフレンドリーなフォームの設計は想像するほど難しくはありません。 ほとんどの場合、フォームを使用する前に、いくつかの基本事項を念頭に置き、フォームを徹底的にテストする必要があります。 それを行う方法について話しましょう！
1。 不要なセクションをすべて削除する
フォームに含まれるフィールドが多いほど、モバイルでの使用が難しくなります。 実際、モバイルでのフォームの使用は単純にもっと複雑です。 フォームに含まれるフィールドまたはセクションの数を減らすことで、訪問者がそれらに入力する可能性を最大化できます。
これは簡単な例です お問い合わせフォーム モバイルでは必要のないいくつかの追加フィールドがあります。
ほとんどの場合、素晴らしい お問い合わせフォーム 受信したいメッセージの名前、電子メール、および本文です。 他のすべては、使用しているWebサイトのタイプと、リードを収集しようとしているかどうかによって異なります.
最終的に、フォームのフィールドが少ないほど、モバイル訪問者がそれらを使用しやすくなります。 結局のところ、タッチスクリーンを使用してフィールドを選択することは、ユーザーが行わなければならないホップの数を最小限に抑えるために、どれほどうまく設計されていても、注意が必要な場合があります。
この時点での目標は、サイト上の既存のフォームを確認することです。 それぞれのセクションに目を通し、前述のフィールド以外の追加フィールドが本当に必要かどうかを判断します。 余分なフィールドがある場合は、それを削除してください。
2。 可能であればドロップダウンリストを使用する
私たちのほとんどは、モバイル デバイスでの入力やタッチスクリーンの使用に慣れています。 ただし、友人にテキストメッセージを送信し、必要事項を記入すると、 お問い合わせフォーム XNUMX つのまったく異なる経験です。 これらの場合、多くの情報を入力しなければならない場合にイライラする可能性が高くなります。
モバイル ユーザーの生活を楽にする XNUMX つの方法は、サイトの要素に関する選択を簡素化することです。 私たちが話していることを理解してもらうために、前の例を利用しましょう 予約 レストラン：
作ります 予約、おそらく名前、メールアドレス、電話番号を残す必要があります et 時間と出席者の数を示します。 時刻を検証するフォーム フィールドを作成するには XNUMX つの方法があります。 予約:
- 数値エントリのみを受け入れるフィールドを構成します。
- 予約可能なすべての時間を含むドロップダウンリストを設計します。
ご想像のとおり、後者の方がモバイルユーザーにとってよりユーザーフレンドリーです。 このアプローチでは、数字を入力する必要はなく、含めるオプションから最適なものを選択するだけです。
フォームを見て、ドロップダウンメニューに置き換えることができるフィールドがフォームに含まれているかどうかを確認するためのアイデア。 ドロップダウンメニューを使用して名前やメールを収集することはできないため、これが常に当てはまるとは限りませんが、他のオプションを使用することはできます。
使用例が何であれ、ドロップダウンメニューにモバイルデバイスから簡単に選択できるオプションが含まれていることを確認する必要があります。 言い換えれば、誰かが正しいオプションを選ぶためにつつく必要がないように、メニューを十分に大きくします。
3。 送信ボタンが簡単に触れるようにしてください
このヒントは非常に単純ですが、まだ言及されていません。 設計するすべてのフォームには、ユーザーが入力したデータを送信することを確認する方法を含める必要があります。 ほとんどの場合、これは送信ボタンを作成することを意味します。
通常のコンピューターを使用する場合、送信ボタンをクリックすることは世界で最も自然なことです。 ただし、モバイルではボタンを押すのがはるかに難しいフォームがいくつかあります。
訪問者がフォームに入力した情報を送信できない場合、すべての努力が無駄になります。 さらに、ボタンほど専門的ではないように見えるものはありません 送信 期待どおりに機能しません。
モバイル用の提出ボタンをより適切に設計するには、次の3つのヒントを参考にしてください。
- モバイルデバイスを簡単にタップできる大きさであることを確認してください。
- ユーザーがボタンに適切に触れないように、ボタンを他のアイテムに近づけすぎないでください。
- たとえば、対照的な色やクリエイティブなタイポグラフィを使用して、ボタンを強調表示します。
それに加えて、サイトを公開する前にボタンをテストすることもできます。 これを行う方法については、後ほど詳しく説明します。 とりあえず、パフォーマンスについて話しましょう。
4。 フォームがすぐに読み込まれることを確認する
多くの記事でウェブサイトのパフォーマンスについて多くのことを話しますが、それはスピードが必要だからではありません。 重要なのは、ほとんどの人は遅いWebサイトを好まないということです。これは、完全に理にかなっています。
インターネットの速度が速くなると、Webサイトの読み込みが長すぎるのを待つのが難しくなる可能性があります。 さらに、モバイルインターネットの速度は、通常のホーム接続よりもはるかに変動する傾向があります。 つまり、これらのユーザーを満足させたい場合は、すべてのユーザーがインターネットにアクセスできるわけではないため（つまり、高速）、Webサイトをモバイルデバイス用に高度に最適化する必要があります。
この特定のヒントは、Webサイト全体に適用できますが、フォームを表示するモバイルページにとっても重要です。 サイトのこれらの部分の読み込みに時間がかかりすぎる場合は、 ランデブー 変換を失う 訪問者とつながる機会。
通常、WebサイトのロードにはXNUMX秒以内で完了します。 この制限を超えると、バウンス率が劇的に増加する傾向があります。これはひどいニュースです。モバイルブラウジングの性質を考えると、この時間をできるだけ短くすることをお勧めします。 。
これを念頭に置いて、サイトの全体的なパフォーマンスを向上させる方法はたくさんあります。 たとえば、より良いプランにアップグレードできます宿泊施設、速度と速度を最適化したレスポンシブなテーマを使用します。 画像を圧縮する。 もちろん、これらはすべてのユーザーに役立ちますが、より小さなデバイスを使用するユーザーには特に役立ちます。
5。 公開前にフォームをテストする
フォームはほとんどのWebサイトの重要な部分であることを考えると、公開する前にフォームを徹底的にテストすることは理にかなっています。 WordPressを使用すると、このプロセスは非常に簡単です。 フォームを表示する特定のページを設計し、完全にテストするまで公開しないでください。
もちろん、使用したいプラグインやテーマはあなた次第です（モバイルサイトの開発に役立つ限り）。 ただし、テストフェーズに関しては、シンプルに保ち、次のようなツールを使用することをお勧めします。 ツール 開発の クロム 仕事をする。
簡単な例を見てみましょう。 Chromeを使用している場合は、先に進んで、テストするフォームでページをプレビューしてください。 次に、このページの任意の場所を右クリックして、オプションを選択します 検査 。 Chromeは、ページのソースコードを確認および編集するために使用できる一連のツールを左右に表示し、モバイルデバイスからその外観のプレビューを確認できます。
画面の上部にあるメニューを使用して、さまざまな解像度を切り替えることができます。 Chromeには、いくつかの一般的なモバイルデバイスの設定が含まれていますが、カスタム解像度を入力することもできます。
この時点で、複数のデバイスでお問い合わせフォームの外観と動作を確認する必要があります。 以下の例を見てください-フォームは正常に機能しますが、適切に適合していないことがわかります。 特に、画面の端に近すぎるテキストとアイコンに特に注意してください。
この問題を防ぐXNUMXつの方法は、最初のヒントで説明したように、フォームをシンプルに保つことです。 以下の例では、フォームは複数のドロップダウンリストを使用し、XNUMXつのフィールドのみを必要とします。 これにより、使いやすくなり、さらに重要なことに、フォームが非常に単純であるため、すべてのデバイスに完全に適合している必要があります。
フォームのいずれかに問題がある場合は、明らかにすぐに解決する必要があります。 そうしないと、モバイルオーディエンスを遠ざけるリスクがあります。これは、最初に回避しようとします。
まとめ
Webサイトがモバイルデバイスと互換性があることを確認することは、トラフィックを維持し、訪問者を苛立たせないための鍵です。 具体的には、メッセージの受信や貴重なリードの収集を逃したくない場合は、フォームをモバイルデバイスで簡単に使用できるようにする必要があります。
モバイルフレンドリーなフォームをデザインする場合、あなたの人生をシンプルにするための5つのヒントがあります：
- 不要なセクションをすべて削除します。
- 可能であれば、ドロップダウンリストを使用します。
- 送信ボタンは簡単に押すことができるようにしてください。
- フォームがすばやく読み込まれることを確認してください。
- フォームを公開する前にテストしてください。
