モバイル ユーザーを変換するための初心者向けガイド

電車に乗っているとき、空港に座っているとき、または単にソファに横になっているときに、スマートフォンでオンライン フォームに記入しなければならなかったときのことを考えてみてください。 モバイルフォームのデザインに注目したことはありますか?

気付いていない可能性があります。 ユーザーがフォームにシームレスに入力して 1 日を続けられる直感的なエクスペリエンスをユーザーに提供することが目標です。

このガイドでは、それを行うための最も効果的な方法を確認します。 ここでは、ぎこちなく、位置がずれていなくても、コンバージョンを促進し、優れたユーザー エクスペリエンスを作成するのに役立つモバイル フォームを設計する方法を学びます。

目次

モバイル vs. デスクトップ フォーム デザイン

現在、Web サイトの訪問者は、デスクトップ コンピューターからサイトを参照したり、コンテンツを表示したり、フォームに入力したりするだけではありません。 また、モバイル デバイスからこれらのタスクを完了しています。

モバイルは、 2022 年 4 月から 6 月までの全世界の Web サイト トラフィックの 60% 近くを占めていました。つまり、モバイル デバイスを介して簡単に確認、入力、送信できるフォームであることが重要です。

モバイル フォームのデザインが重要な理由

最高のモバイル フォーム デザインは、ポジティブなユーザー エクスペリエンスを可能にし、満足度の高い Web サイト訪問者が顧客になり、リピーターになる可能性が高くなります。

モバイル フォームのデザイン、レイアウト、および機能は、Web サイトの全体的なユーザー エクスペリエンスに大きく影響します。

フォームがモバイル フレンドリーでない場合、コンバージョンが減少し、モバイル サイトのトラフィックが減少し、不満や不満を抱く顧客が増える可能性があります。 そして、誰がそれを望んでいますか？

なぜモバイル フォームのデザインはデスクトップのデザインと異なるのでしょうか?

受賞歴のあるマーケティング インフルエンサーで戦略家のライラック ブロックは、次のように述べています。

「そしてもちろん、これにはフォームも含まれます。特に、モバイルで常にフォームに記入しなければならないように感じるからです。」

具体的には、通常 4.7 インチから 6.7 インチのサイズの Apple iPhone などのモバイル デバイス間のディスプレイまたは画面サイズの違いについて考えてみてください。 Mac ラップトップまたはデスクトップ。通常、サイズは 13 インチから 24 インチです。 iPhone の画面にフィットするフォームがデスクトップの画面に完全にフィットするとは考えにくいでしょう。

モバイル ユーザーがフォームを簡単に読んだり、入力したり、送信したりできない場合、ビジネスを失う可能性があります。 そのため、あらゆるモバイル デバイスの画面に適合するモバイル フレンドリーなフォームを作成することは、訪問者に永続的な印象を残し、コンバージョンを促進するために、優れたユーザー エクスペリエンスを作成するために不可欠です。

レスポンシブ ウェブ デザインとは

モバイル フォーム デザインをさらに一歩進めて、Web サイト全体があらゆる種類のデバイスで機能するようにしたい場合は、レスポンシブ Web サイト デザインを実装できます。

レスポンシブ Web デザインでは、ユーザーの画面サイズ、プラットフォーム、向き、環境が考慮されます。 非常に多くの人々がさまざまなデバイスでさまざまな Web サイトに絶えずアクセスして閲覧しているため、これは優れたユーザー エクスペリエンスを作成するためのシンプルで効果的な方法です。

サイトがレスポンシブ デザインであることを確認するには、いくつかの方法があります。 たとえば、WordPress ユーザーの場合、サイトのデザインにインストールして使用できるレスポンシブ WordPress テーマがいくつかあります。

さらに、Squarespace などのソフトウェアを使用してサイトを構築している、または構築したことがある場合、サイトは自動的にレスポンシブ Web デザインになる場合があります。

今日、レスポンシブ Web デザインは、さまざまなモバイル デバイスを介して Web サイトにアクセスする人々が非常に多いため、企業にとって人気のある選択肢となっています。 しかしここでは、モバイル フォーム デザインの議論に戻りましょう。

モバイルフォームのデザイン: 11 の UX ガイドライン

「モバイル フォームをデザインするときは、物事をシンプルに保ち、できる限りすばやく作成することが重要です。 [フォーム] はモバイルで完了するのが難しく、すべてが必要以上に時間がかかるように感じます。」

言い換えれば、最も重要なことはエンドユーザーにとってのシンプルさです。 モバイル フレンドリーなフォームを作成する場合、訪問者に最高のユーザー エクスペリエンスを提供するために必要な手順がいくつかあります。 これらのモバイル フォーム設計のベスト プラクティスのうち、今日から実装を開始できる 11 を確認しましょう。

1. フォーム フィールドの数を最小限に抑えます。

「Less is more」という言葉を聞いたことがありますか？ モバイル フォームを作成する際に考えるべきことはまさにそれです。

モバイル デバイスの画面のサイズと、フォームに配置する必要のあるコンテンツの量の間で、フォームが雑然とした感じになってしまうことがあります。 不要な毛羽を取り除くことを忘れないでください。 絶対に必要な情報のフォーム フィールドのみを保持します。

プロセスを合理化するには、フォーム フィールドに明確かつ簡潔なラベルを付け、オプション フィールドを「オプション」としてマークするか、必須フィールドの横にアスタリスクを含めます。

画像ソース

目的は、フォームをできるだけ簡単に記入できるようにして、人々がフォームに記入する可能性を高めることです。

2. 可能な場合は入力を自動化します。

誤って住所を入力してフォームがスペルを修正した場合、フォームは回答を自動修正します。

配送先住所の入力を開始すると、フォームの残りのフィールドに保存した住所を「自動入力」するかどうかを尋ねるボックスが表示され、残りの住所が表示された場合は、フォームが応答をオートコンプリートしています。

モバイル フォームにオートコレクト機能とオートフィル機能を実装すると、ユーザーが詳細をすばやく簡単に入力できるようになり、ユーザー エクスペリエンスが向上します。

以下の例では、表示される小さなポップアップをクリックすることで、情報を簡単に自動入力できます。

画像ソース

3. 1 列のレイアウトを使用します。

長いフォームや複数ステップのフォームを作成する場合は、すべてのコンテンツを 1 列のレイアウトで一覧表示します。

画像ソース

単一列のフォーム レイアウトは次のとおりです。

を。 読みやすい。

すべてのフォーム フィールドを 1 列形式で配置すると、訪問者は一度に 1 つの項目だけに集中できるため、フォームが読みやすくなります。

b. 気が遠くなるようなことはありません。

特にモバイル デバイスのように狭いスペースでフォームを見て、大量のコンテンツが押しつぶされているのを見ると、圧倒されるかもしれません。 そのため、コンテンツを行ごとに区切り、フォーム フィールドを 1 列の形式で配置すると、コンテンツの見た目と感じがより目立たなくなります。

c. 完了までの時間が短縮されます。

複数ステップのフォームを 1 つの列に配置すると、見込み客は複数列のフォームよりも迅速にフォームを完了することができます。 これは、形式によってフォームが読みやすくなり、ステップごとに作業しやすくなるためです。

デスクトップまたはラップトップから表示した場合は、HubSpot Web サイトのこのサインアップ フォームをご覧ください。

画像ソース

ここでは 2 列のレイアウトが理にかなっています。幅の広い画面には作業するための十分なスペースがあるからです。 モバイル デバイスから表示された同じフォームを確認してください。

画像ソース

この 1 列のレイアウトにより、コンパクトなモバイル画面が乱雑になるのを防ぎながら、視線が自然に流れるようになります。

4. 一貫性が重要です (フォームの外観も同様です)。

ラップトップでフォルダや開いているタブを閉じるにはどうすればよいですか?

右上隅の「x」ボタンをクリックします。

しかし、特定のアプリケーションでボタンが表示されなかった場合はどうなるでしょうか? 窓を閉めに行ったとき、あなたはどう思いますか？

混乱したり、イライラしたりしているかもしれません。 アプリケーションをシャットダウンする方法を理解するのに 1 ～ 2 分かかる場合があります。

これは大まかな例にすぎませんが、一貫性の重要性をよく示しています。 詳細については、このビデオをご覧ください。

フォーム デザインの一貫性は、スタイル (色、タイポグラフィ、ロゴなど) だけでなく、人々が慣れ親しんでいる一般的に受け入れられている規則にも当てはまります。

一貫したエクスペリエンスを確保するためのヒントを次に示します。

• フォームのルック アンド フィールをブランドや Web サイトに合わせます。
• フォームのスタイルと書式設定が一貫していて補完的であることを確認してください (不快に見えたり、場違いに見えたりしてはなりません)。
• フォーム フィールドの入力を左に揃えます。
• 対応する入力ボックスの上に各ラベルを貼り付け、左揃えにします。
• 必須の質問を示すには、アスタリスクを使用します。

画像ソース

第一印象は（人生においてもビジネスにおいても）永続的な印象を残します。 それはあなたのモバイルフォームにも当てはまります。 暗い、読みにくい、雑然とした、見栄えの悪いフォームを完成させたいと思う人はいません。

モバイル フォームは、見た目が美しいだけでなく、機能性も高くなければなりません。 その外観は、読みやすさとポジティブなユーザー エクスペリエンスに貢献する必要があります。 これを実現するには、シンプルで読みやすいフォント スタイルとサイズ、圧倒されないカラー パレット、最小限のフォーム フィールドを使用します。

5. タッチ体験を念頭に置いてください。

テキスト メッセージを送信するときの携帯電話の持ち方を考えてみてください。

ほとんどの場合、親指を使用して画面を操作しながら、両手で電話を握ります。 または、片手で行ったり、人差し指を使って入力したりすることもできます。

私たちは、ラップトップやデスクトップとは大きく異なる方法でスマートフォンを操作します (テキスト メッセージの親指に注意してください)。モバイル フォームのデザインは、それを反映する必要があります。

心に留めておくべきいくつかの提案を次に示します。

• フォームをすっきりさせ、誤ってボタンを押さないように、十分な余白を確保してください。
• ボタンが論理的に配置されていることを確認します (たとえば、送信ボタンをフォームの下部近くに配置すると、ユーザーが上にスクロールして見つける必要がなくなります)。
• 小さなモバイル画面でテキスト (フォント サイズとスタイル) が判読できることを確認します (テキストを読むために、画面をピンチしてズームインすることは誰も望んでいません)。
• フォーム フィールドとボタンが、指で快適にタップできる大きさであることを確認してください。
• フォームが画面の下部にポップアップするようにして (可能な場合)、簡単にアクセスできるようにします。

画像ソース

6. 入力制約を活用します。

入力制約は、ユーザーがフォーム フィールドに入力できる応答のタイプを制限します。 これには、文字数制限 (たとえば、求人応募フォームに記入するとき) や、数字しか入力できない (電話番号の場合) などがあります。

これは、次のフォームに表示されます。ユーザーが電話番号を入力しようとすると、数値キーボードがポップアップします。

画像ソース

入力制約は、不注意によるミス、遅延、または混乱を制限することにより、フォームの効率を最大化します。 たとえば、誰かがレストランのテーブルを予約しようとして、誤って過去の日付を選択した場合、制約により実際にその日付を選択して確認することができなくなります。

画面が小さいと情報を正確に入力するのが難しくなるため、これはモバイル向けにデザインする場合に特に重要です。 入力制限を設定することで、フォーム フィールドに入力する時間を節約し、長々とした回答や無効な回答を受け取るのを防ぐことができます。

入力制約の別の例を次に示します。

画像ソース

7. 明確なアクション ボタンを作成します。

ボタンは、モバイル フォーム デザインの過小評価されている側面です。 考えてみてください: 右ボタンが押された後にのみ、フォームの送信または変換が行われます。 したがって、この要素を見逃すことはできません。

この UI チート シートと UX Planet ブログは、効果的なボタンを設計するための優れたリソースです。 ここでは、モバイル フォームに適用できる前述の原則の一部を簡単に説明します。

• ボタンが多すぎると、機能が損なわれます (フォーム フィールドと同じように、必要なボタンだけを保持します)。
• ボタンのスタイルとラベルに一貫性を持たせます (大文字、書式、配置など)。
• サイズや色で目立つようにして、プライマリ ボタン (ユーザーに実行してもらいたい主なアクション) に焦点を当てます。
• 右は右です — モバイルの一般的な経験則は、メイン ボタンを右側に配置し、2 つ目のボタンを左側に配置することです (ただし、これは個々のニーズによって異なります)。
• ほとんどの場合、特定のラベルが答えになります (「編集」ではなく「このページを編集」)。

画像ソース

8. 支払い用のカード スキャナーを提供します。

クレジット カードの詳細をスマートフォンのフォームに入力してみましたか? 小さなキーボードを使って小さな画面にたくさんの数字を入力するのは、面倒な作業になる可能性があります。

Microblink などのカード スキャン アプリは、まさにその理由で人気が高まっています。 購入時に、訪問者はボタンをクリックして画面に移動し、モバイル デバイスのカメラを使用して、免許証またはクレジット カードの表と裏の安全な写真を撮ることができます。

画像ソース

ほんの数枚の写真で、リードはモバイル フォーム入力プロセスの中で最も時間のかかる部分の 1 つを完了することができます。

9. 特定の情報の必要性を説明してください。

簡単な電子メールのサインアップまたは登録フォームに記入する際に、サインアップ フォーム自体とは関係のない個人情報の提供を求められたことはありませんか?

これは、すべてのタイプのフォーム (モバイルに限らず) で一般的に発生します。 必要性を説明せずに、個人情報やその他の機密情報を誰かに尋ねることは、大雑把に思えるかもしれません。

訪問者がフォームに入力する理由に直接関係のない質問をする場合は、訪問者がクリックしてこの情報を求めている理由を理解できる要約ボックス (追加情報を含む) を作成することが不可欠です。

このようなインジケーターは、指示がすぐにわからない場合に、フォーム フィールドへの入力に関する追加のガイダンスを提供するのにも役立ちます。 下の画像では、人がアイコンにカーソルを合わせると、概要ボックスがポップアップ表示されます。

画像ソース

これらの小さなディテールにより、ユーザーが途中で離脱する可能性を減らしながら、フォームがプロフェッショナルで思慮深いものに感じられます。

10. 検証とフィードバックを収集します。

ユーザー エクスペリエンスは、優れたモバイル フォーム デザインの核心です。 また、検証とフィードバックは、優れた UX を提供する上で重要な役割を果たします。

検証により、入力した情報が正しいかどうか (または正しくないか) を人々に知らせることができます。 以下のフォーム フィールドの緑色のチェックマークに注目してください。

画像ソース

モバイルフォームに記入している間、訪問者はどこかで間違いを犯すに違いありません。 ユーザーがすぐに修正できるように、フォームはこれらのエラーにリアルタイムでフラグを立てる必要があります。

たとえば、誰かが住所の横に間違った郵便番号を追加した場合、モバイル フォームはエラー メッセージを表示する必要があります。 これは、わかりやすい言葉で、エラーの場所とユーザーがそれを修正する方法を示す必要があります (下の画像を参照)。

画像ソース

また、フォームを使用する際にフィードバックを提供することも重要です。 たとえば、長い複数ステップのフォームにプログレス バーを表示すると、ユーザーがどこまで到達したか、完了するまでにどれくらいの時間が残っているかを示すことで、フォーム入力プロセスをより魅力的にすることができます。

画像ソース

プログレスバーなしで上記のフォームに記入している人を考えてみてください。 彼らは、いつフォームが終了するのかわからないまま「次へ」ボタンをクリックし、欲求不満で最終ステップの直前にそれを放棄することさえあります.

人々がフォームを送信したら、「Success!」のような別の画面またはページに誘導する必要があります。 または「ありがとう」と言って、提出物が機能したことを知らせます。

ユーザーが無料の Google 広告キットを受け取るためにサインアップした後に表示される HubSpot の成功ページの例を次に示します。

画像ソース

11. フォームをアクセス可能にします。

アクセシビリティは、フォームの使いやすさの基本です。 アクセシビリティを考慮して設計されたフォームは、視覚障害、身体障害、感覚障害、認知障害など、より幅広い人々が使用できます。

World Wide Web Consortium Web Accessibility Initiative、WebAIM、および The A11Y Project Checklist からアクセス可能なフォームを作成するための具体的な推奨事項を次に示します。

• フォームを拡大したときに、テキストがピクセル化したりぼやけたりしていないことを確認します (見やすくするため)。
• スクリーン リーダーで読み取ったときに明確に理解できるように、フォーム要素にラベルを付けます。
• 縦向きと横向きの両方のモードでフォームにアクセスできることを確認してください。
• 応答するのに十分な時間をユーザーに与えるために、(可能な場合) 時間制限を使用しないでください。
• ビデオまたはオーディオ コンポーネントのキャプションまたはトランスクリプトをフォームに含めます。
• 色のコントラストに注意してください。 そんな時に役立つ無料ツールを紹介します。
• キーボードだけでフォームが完全に使用可能であることを確認してください。

上記のモバイル フォーム デザイン戦略のすべてが定着するようにするための優れた方法は、フォーム デザインですべきでないことを調べることです。 以下のビデオでは、モバイルとデスクトップの両方でフォームをデザインする際にすべきでないことの例をいくつか紹介しています。

あなたに戻って

Web サイトの訪問者がモバイル デバイスを介して Web フォームに入力し、送信していることは周知の事実です。 これは、ほとんどの人が何らかのモバイル デバイスをどこにでも持ち歩いており、フォームがモバイル フレンドリーであることが重要であるため、便利で効率的だからです。

そうしないと、フォームを読んだり、記入したり、送信したりすることが難しくなり、リードを失望させたり、ビジネスを完全に失ったりする可能性があります.

モバイル フォームのデザインを検討し、これらのガイドラインを実装することで、モバイル フォームのユーザー エクスペリエンスを向上させ、見込み客や顧客との良好な関係を構築し、コンバージョンを向上させることができます。

編集者注: この投稿はもともと 2018 年 12 月に公開されたもので、包括性を高めるために更新されています。