支払いフォームと住所フォームのベストプラクティス
ユーザーが住所フォームと支払いフォームにできるだけ早く簡単に記入できるようにすることで、コンバージョンを最大化します。
— 更新済み
Appears in: Web Payments
フォームを適切に設計することは、ユーザーを助け、利便性とコンバージョン率を向上させます。簡単な修正を 1 つ施すだけで、大きな違いが生まれます!
こちらは、すべてのベストプラクティスを取り入れた簡単な支払いフォームの 1 例です。
こちらは、すべてのベストプラクティスを取り入れた簡単な住所フォームの 1 例です。
チェックリスト #
- 用途がはっきりした HTML 要素を使用する:
<form>
、<input>
、<label>
、<button>
。 <label>
を使って各フォームフィールドに ラベルを付ける。- HTML 要素の属性を使用して、組み込みのブラウザー機能にアクセスする。特に適切な値を持つ
type
とautocomplete
。 - 支払いカード番号など、増加させることを意図していない番号には
type="number"
を使用しない。代わりに、type="text"{/code1 }と <a href="#inputmode-attribute" data-md-type="link"><code data-md-type="codespan">inputmode="numeric"
使用する。 - 適切なオートコンプリート値を
input
、select
、またはtextarea
に使用できる場合は、それを使用する。 - ブラウザがフォームを自動入力できるように、入力の
name
とid
属性に、ページの読み込み中またはウェブサイトの展開中に変化しない安定した値を指定する。 - 一旦タップされたり、クリックされたりした送信ボタンを無効にする。
- データは、フォームの送信中だけでなく、入力中にも検証する。
- ゲストのチェックアウトをデフォルトにし、チェックアウトが完了した後にアカウントを簡単に作成できるようにする。
- 分かりやすい行動喚起による明確なステップでチェックアウトプロセスの進捗を示す。
- 混乱や気を散らすものを取り除くことにより、チェックアウトの潜在的な離脱ポイントを制限する。
- チェックアウト時に注文の完全な詳細を表示し、注文内容を簡単に調整できるようにする。
- 不要なデータの提供は求めない。
- 正当な理由がない限り、名前は単一の入力で求める。
- 名前とユーザー名には、ラテン文字以外の文字も入力できるようにする。
- さまざまなアドレス形式を許可する。
- アドレスに 1 つの
textarea
だけを使用することを検討する。 - 請求先住所の入力にオートコンプリートを使用する。
- 必要に応じて国際化およびローカライズする。
- 郵便番号による住所検索を使わないことを検討する。
- 支払いカードのオートコンプリートの適切な値を使用します。
- 支払いカード番号には単一の入力を使用する。
- オートフィルの使用体験を損なわせるようなカスタム要素の使用は避ける。
- 現場とラボの両方でテストるす: ページ分析、インタラクション分析、および実際のユーザーのパフォーマンス測定。
- さまざまなブラウザ、デバイス、プラットフォームでテストする。
用途がはっきりした HTML を使用する #
ジョブ用に構築された要素と属性を使用します。
<form>
、<input>
、<label>
、<button>
type
、autocomplete
、inputmode
これらは、組み込みのブラウザ機能を有効にし、アクセシビリティを向上させ、マークアップに意味を持たせます。