スキップしてメイン コンテンツに移動

投稿

4月, 2020の投稿を表示しています

最高の住所入力フォームを作ろう!

最高の住所入力フォームを作ろう!住所入力フォームを作る時のベストプラクティスを考えます。個人情報を入力するフォームで、必ず出てくるのが住所の入力です。入力テキストボックスをただ置くだけでなく、 分かりやすい表示や、郵便番号から住所を自動入力するEFO機能など、 入力のしやすがサイト製作者側に求められています。この記事では、「分かりやすい」「便利」な住所入力フォームのベストプラクティスについて考えていきます。NGパターン分かりづらいNGパターンの住所入力フォームの例を見てみましょう。まずは、次のイメージをご覧ください。おそらく多くの方が、このフォームを見たら「分かりづらいフォームだな〜」と思うでしょう。場合よっては入力をやめて、サイトを離脱しまうかもしれません。では実際、上のフォームにはどのような問題があるのでしょうか? 次のリストに問題点を列挙しました。問題点1: 住所1と住所2の使い分けが分からない。住所1が、市区町村名までか、番地まで入力するのかが分からず、それに伴って住所2もどこから入力していいか分からないため、ユーザーは入力に迷い不快な思いをするでしょう。問題点2: 郵便番号のハイフンあり/なしが分からない郵便番号に"123-4567"のようにハイフンありで入力するのか、"1234567"のようにハイフンなしで入力するのか、フォームのラベルから判断がつきません。問題点3: 郵便番号、住所をすべて手入力する必要がある最近、多くのサイトで用意されている、郵便番号から住所を自動入力する機能もないため、ユーザーは不便に思うかもしれません。入力に迷わない分かりやすいラベル上の**「住所1」「住所2」**のように、ラベルを抽象的な表記にしてしまうと、分かりにくくなってしまいます。入力に迷わないように「都道府県」「市区町村」などの具体的なラベル名にしましょう。実際に、具体的なラベル名にした住所入力フォームの例を見てみましょう。「住所1」を「都道府県・市区町村・番地」に、「住所2」を「建物名・号室」にラベル名を変更しました。ラベル名を変更しただけなのに、一気に入力しやすくなったのがお分かります。住所の自動入力機能があると楽!分かりやすいラベルに加えて、EFO(Entry Form Optimization:入力フォーム最適化)対応と…