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