自動入力を活用するためにフォームを最適化する方法

サプライズ！ 自動入力機能を使用して、ユーザーがオンラインで商品を簡単に購入できるようにすることができます。

それはあなたの幸運な日でなければなりません。 それとも、何年ですか？

自動入力は新しいものではありませんが、時間の経過とともに改善されています。 ただし、ユーザーに Web フォームへの入力を促す素晴らしい方法です。ユーザーに連絡してもらいたい場合でも、支払い情報を入力してもらいたい場合でも、大きくて美しい [購入] ボタンを押すことができます。

自動フォーム入力は、退屈で時間がかかり、変換の障壁となる可能性のある Web フォームのすべての労力を取り除きます。 ユーザーのためにフォーム データを自動入力すると、ユーザーの時間を節約し、エラー (タイプミスなど) の可能性を減らすことで、より優れたユーザー インターフェイスとユーザー エクスペリエンス (UX) を提供できます。

また、ユーザーが考えすぎたり、さらに悪いことに、快適なソファから立ち上がって財布までの恐ろしい距離を歩く必要がなくなります。

あなたは私たちが劇的だと思うかもしれませんが、長い一日の仕事の後、あなたのリーダーは疲れ果てて起き上がれないことがあります. または、忙しいお母さんで、5 分間の休憩中に手早く買い物をしようと思っていたのに、突然、時間がなくなってしまいました。

ある調査で、Google は、自動フォーム入力を有効にすると、ユーザーがフォームを 30% 速く完了することを発見しました。 この速度は、自動入力の利便性と相まって、フォームの送信率とコンバージョンを向上させ、その過程でユーザーを満足させます. そして満足しているユーザーはリピーターです。

フォーム設計のベスト プラクティスのリストに自動機能が含まれているのはそのためです。

では、Web フォームでオートフィルを機能させるにはどうすればよいでしょうか。

すべては、Web 開発者がフォームをユーザーのブラウザーで動作するように最適化して、フォーム フィールドが何であるかを認識できるようにすることから始まります。

自動入力はどのように機能しますか?

ここから始めましょう: そもそもオートフィルとは?

自動入力は、ほとんどのブラウザーがユーザーに提供する気の利いたツールです。 ユーザーが自動入力を有効にすると、ブラウザは、保存した適用可能なユーザー データをフォームに自動的に入力します。 その結果、ユーザーは手作業で各フィールドに入力する必要がなくなります。

ブラウザが異なると、保存されるユーザー データがわずかに異なりますが、全体的には似ています。

注: 「住所」には、電話番号、電子メール アドレス、配送先住所が含まれます。

では、autofill はどのようにその魔法を実行するのでしょうか?

とてもシンプルです。 ブラウザは、ユーザーが他の Web サイトまたは自分の Web サイトで過去にフォームに入力した情報を収集します。 一部のユーザーは、ブラウザの自動入力設定で自動入力を設定し、情報を直接提供して生活を楽にすることさえあります. この場合、ブラウザは、認証手順を通じて、支払い方法などの機密データを保存できます。

ユーザーは、自動入力設定を通じて自動入力の設定を自分の側で制御し、それを有効または無効にすることを選択できます。

有効になっている限り、ブラウザーはいくつかのヒューリスティックを使用して、ユーザーのアクセス許可に基づいて自動入力できるフォーム フィールドを決定します。

自動フォーム入力を Web フォームに追加する方法

良いニュースの準備はできていますか？

フォームのベスト プラクティスを使用して Web フォームを作成する限り、主な機能はユーザーのブラウザーまたはデバイスに組み込まれているため、通常は自動入力が提供されます。 そのため、コーディング標準を満たすフォームの開発に専念する必要があります。 それを管理すると、自動入力がモバイルとデスクトップのフォームで機能するはずです。

そうでない場合、Google は、自動入力がユーザーに対して機能しない理由として 2 つの理由を挙げています。

1. 1. Chrome がユーザー データを提供するには、ウェブサイトの安全性が十分でない可能性があります。
   2. ウェブサイトが安全な場合、Chrome はフォーム フィールドを検出できない可能性があります。

Web フォームでこれらの問題を回避するには、Web サイトがブラウザーの標準を満たすのに十分安全であることを確認してください。 セキュリティ ガイドラインを設定し、ウェブサイトとソフトウェアを最新の状態に保ち、ファイアウォールと VPN を使用してデータ サイロを防ぎます。

Web サイトが安全で自動入力が機能しない場合は、フォームが次のフォーム コードのベスト プラクティスに従っていることを確認してください。

自動入力の動作を保証するためのベスト プラクティスを形成する

ブラウザーは魔法のようにユーザーの生活を楽にしますが、ユーザーを助ける方法はいくつかあります。 ブラウザーに適切なヒントを提供する Web フォームを開発することで、ユーザーのためにフォーム データを自動入力できることを保証できます。

フォーム フィールドに入力するデータの種類に関するヒントをブラウザーに与えることから始めます。これにより、ブラウザーがフォームを読みやすくなり、ジョブを実行しやすくなります。

これを行うには、正しい入力タイプと対応する入力ラベルを使用していることを確認してください。 また、各入力要素に name 属性と autocomplete 属性を提供する必要があります。 下の画像は、必要になる可能性のある HTML 標準に従って、共通名とオートコンプリート属性を示しています。

Google Developers の写真。

標準の HTML フォーム プラクティスに準拠するには、入力要素を <form> タグでラップして自動入力を有効にする必要があります。 Google Chrome Web ブラウザーでは、フォーム フィールドが HTML フォーム タグに含まれている必要があります。そうしないと、提案のみが提供され、フォーム データは自動入力されません。

してはいけないこと: 自動入力を妨げる行為

ブラウザーがフォーム データを自動入力するのに役立つプラクティスもあれば、邪魔になるものもあります。 フォームを作成するときは、次のことを確認してください。

• • クライアント側の検証などのフィールド検証の落とし穴を回避する
  • 独自の入力フィールドを作成する代わりに、標準入力フィールドを使用する
  • 偽のプレースホルダーの代わりに、入力フィールドでプレースホルダー属性を使用する
  • 配送先住所を請求先住所にコピーしないでください
  • フォームがパスワード マネージャーと連携することを確認する
  • フォーム入力の自動化に関しては、ブラウザーのデータだけが助けとならない場合があります。

ユーザーは何百万ものパスワードを追跡することにうんざりしています。 アカウントからロックアウトされるまでパスワードを推測したり、現在のパスワードを使用できないと言われただけであきらめてパスワードをリセットしたりすることほど悪いことはありません。 (もう試したんじゃないの!?)

次に、すべてのユーザー名とパスワードを 1 か所で追跡するパスワード マネージャーの人気が高まっています。 LastPass や 1Password など、これらの最高のマネージャーには、ログイン フォームにパスワードを自動入力する機能が備わっています。

Web サイトの所有者にとって、これは、ログイン フォームがパスワード自動入力アプリで機能することを確認することを意味します。

幸いなことに、パスワード マネージャーは、ブラウザーと同じように、正しく構築されたフォームに独自にフックします。 上記のフォームのヒントに従うと、フォームは LastPass と 1Password でシームレスに機能するはずです。

ただし、ブラウザーと同様に、パスワード マネージャーがフォームを読み取り、その機能を保証できるようにする方法があります。

• • フィールドを動的に追加または削除するログイン フォームを使用しない
  • Web ページの最初のレンダリングでフォームを表示する
  • プレースホルダー属性を意図したとおりに使用する
  • 可能な限り、複数ページのログイン フォームの使用を避ける

自動入力の方法: その他のヒント

フォーム UX に関して言えば、ユーザーの期待に応えることが最低限の要件であり、期待を超えることが目標です。 これは、フォーム レイアウトの柔軟性を実装して、ユーザーの期待の違いに適応することを意味する場合があります。

自動入力機能の場合、柔軟なフォーム レイアウトを作成することは、複数の国でビジネスを行ったり、消費者にサービスを提供したりする企業にとって非常に重要です。これは、世界中の人々が異なる方法で住所を書くためです。 これらのユーザーの期待とブラウザに対応するために、アドレス フィールドを適宜調整する柔軟なフォームを提供することを検討してください。

アプリの自動入力フォームの設定

ユーザーが Apple デバイスでアクセスするアプリを作成するときは、アプリが Apple のパスワード自動入力機能をサポートしていることを確認し、次の手順に従ってアプリの関連ドメインを設定します。

iOS 自動入力要件

Android デバイス上のアプリの場合、アプリが標準ビューを使用している限り、Android 自動入力フレームワークがフォームに自動的に入力します。 ここで説明するように、自動入力ワークフローを完了し、関連するドメインを設定し、フィールドを重要としてマークし、android:autofillHints 属性を使用することで、フレームワーク内でのアプリの動作を最適化できます。

Android Autofill の操作と手順

コンバージョンで感謝される

フォームがブラウザーやパスワード マネージャーの自動入力機能で適切に機能することを確認することは、フォームの UX を強化し、フォーム送信に関する摩擦を軽減するための最良の方法の 1 つです。 半分 (またはそれ以下!) の労力で同じ結果を得るのが好きではない人はいますか?

自動入力は、フォームをより迅速かつ簡単に入力できるようにすることで、ユーザーの生活を楽にします。つまり、ユーザーは探していたものを手に入れることができ、より多くのコンバージョンを得ることができます。

そして、私たちの意見では、コンバージョンはユーザーが感謝を伝える最良の方法です.

フォームを魅力的なものにすることに興味がありますか (つまり、高速で、ゴージャスで、ユーザーフレンドリーで、フォーム データの自動入力に最適化されています)。 私たちのチームはそのすべてに情熱を注いでおり、話すのが大好きです。 手を差し伸べる。