こんな入力フォームはイヤだ!「残念フォーム」に学ぶユーザーフレンドリーな入力フォーム設計のコツ

口コミアカデミー 0円すべて無料 口コミサイトの運営やノウハウが学べる、店長限定の無料のオンラインスクール

飲食店宿泊施設などの事業においては、予約が集客の重要な要素となります。

2000年頃までは、予約といえば電話やFAX、そして郵便などが一般的でした。しかし、インターネットの普及以降は自店のWebサイトに専用の予約フォームを設けて予約を承ることも多く見られるようになりました。

フォームは、あらかじめ用意された入力欄に必要事項を入力すると情報が送信される、とても便利なものです。紙の書類に情報を書き込むような感覚で入力できるため、予約のみならず各種申請やアンケートなど多岐にわたり活用されています。

ところが、ひとたびフォームの使い方を間違えてしまうと、ユーザーを戸惑わせたり面倒だと感じさせてしまったりといったことにつながります。

結果として顧客となる可能性のあったユーザーが離脱してしまうことになるため、入力フォームはユーザーフレンドリーであることが求められます。

関連記事

EFO(Entry Form

EFO(イーエフオー)とは、エントリフォームの最適化(Entry Form Optimization)といい、企業や店舗のWebサイトに設置されている問い合わせフォームや、サービスの申し込みフォームといった入力フォーム全般の利便性を改善することを指します。EFOに取り組むことにより入力時間や入力エラーの発生率が減り、ユーザーのストレス削減や離脱防止、コンバージョン率の向上に期待できます。定期的な管理や分析といった作業が必要とされるSEOや広告配信と異なり、入力フォームの改善に求められる工数...

LPOとは?SEOやEFOとの違い・対策手順・成功事例・役立つツール3選

LPO(Landing Page Optimization:ランディングページ最適化)とは、LP(ランディングページ)をユーザーのニーズに合わせて最適化し、ページのCVR(コンバージョン率)を上げるマーケティング手法です。本記事では、LPOとはなんなのか、ほかのWebマーケティング手法との違いや認知が拡大した背景とともに、手順や実践する際のポイントを解説します。そしてLPOに取り組み、CVRアップに成功した2つの企業の事例と、LPOのツールを紹介します。LPOとはLPO(Landing P...


ユーザーを戸惑わせる「残念フォーム」の罪

ユーザーを戸惑わせてしまうような「残念フォーム」は、未だ多くのWebサイトにおいて散見されています。特にインターネット黎明期に設計したフォームには、現在の基準で見ると質の悪いものが多く存在します。

これらのフォームにはユーザーに無駄な手間をかけたり独自の記法を強要したりするものが見受けられるため、改善が必要とされています。

また、最近設計されたフォームにおいても、中には入力欄が多すぎたり入力の流れが可視化されていなかったりといったフォームが存在します。

このような「残念フォーム」を作らないためには、EFO(入力フォーム最適化)の考え方などを用いてフォームを設計することが必要です。

今回は残念フォームの事例と残念フォームを生み出さないためのEFO的ポイントから、フォームを設計する際に気をつけておきたい事柄を紹介します。

こんな入力フォームは嫌だ!残念フォーム厳選3事例を紹介

「残念フォーム」にはさまざまなものがありますが、ここでは特に多くのWebサイトで見かけるものを厳選して3つ紹介します。

1. クレジットカード番号を4桁ごとに区切る

▲[悪いフォームの例]:口コミラボ編集部作成
▲[悪いフォームの例]:口コミラボ編集部作成

決済を伴うWebサイトにおけるクレジットカード情報の入力ページでよく見受けられるのが、クレジットカード番号の入力欄が4桁ごとに分かれているフォームです。

まず、入力欄が4桁ごとに分かれていると、4桁入力し終わるたびにマウスを動かして次の入力欄を選択しないといけません。

更には、前の入力欄の入力間違いに気付いたときもマウスを動かして前の入力欄を選択する必要が出てきます。

最近では、4桁の入力が終わると自動的に次の入力欄が選択されるフォームも存在します。

しかし、そのようなフォームにおいても前の入力欄を修正するにはマウスを動かす必要があるものが多くを占めています。

最も注意が必要なのは、クレジットカード番号は必ずしも4桁の番号が4つの16桁ではない、ということです。

アメリカン・エキスプレスのクレジットカード番号は4桁・6桁・5桁の15桁、ダイナースクラブのクレジットカード番号は4桁・6桁・4桁の14桁です。

これらのカードブランドのクレジットカード番号を4桁ごとに分かれた入力欄に入力する場合、どうしても不自然な形になってしまいます。

以上のことから、クレジットカード番号の入力欄は4桁ごとに分けるのではなく、最大16桁のクレジットカード番号を1つの入力欄にそのまま入力できる形にするとよいでしょう。

2. 全角・半角のどちらかしか受け付けない

▲[悪いフォームの例]:口コミラボ編集部作成
▲[悪いフォームの例]:口コミラボ編集部作成

電話番号や郵便番号などの入力欄には、全角か半角のどちらかしか受け付けないようになっているものが存在します。

これらのフォームは、内部処理の関係で全角・半角を限定する設定が施されていることが多いと思われます。

しかし、パソコンに詳しくないユーザーの中には全角と半角を意識せず入力しているユーザーも存在します。

また、入力内容が正しかったにもかかわらず全角と半角を間違えたことが原因でエラーになってしまうと、気分を害されるユーザーも中にはいるでしょう。

このようなことを防ぐためにも、入力は全角と半角のどちらでも受け付けるようにした上で、内部処理上必要であれば別途変換プログラムを通して全角か半角に変換するとよいでしょう。

3. 入力を全て終えてから入力ミスを指摘する

▲[悪いフォームの例]:口コミラボ編集部作成
▲[悪いフォームの例]:口コミラボ編集部作成

フォームへの入力を全て終えた後の確認画面で入力ミスを指摘するWebサイトも多く見受けられます。

しかし、一通り入力を終えてからもう一度前の画面に戻って入力をやりなおす行為は、面倒だと感じるユーザーも多いでしょう。

確認画面までユーザーを誘導できたにもかかわらず、前の画面に戻ることが面倒だという理由でユーザーの離脱を招いてしまうことはあまりにも勿体ない失敗です。

このような事態を防ぐには、常に入力されている内容が正しいかを監視し、入力ミスがあればその場で画面上にエラーを表示できる設計にするとよいでしょう。

「残念フォーム」を生み出さないために、知っておきたいEFOのポイント

ここまで紹介した「残念フォーム」は、残念ながらいまだ多くのWebサイトにて見受けられるものです。

このような「残念フォーム」ではなく、ユーザーにストレスなく入力してもらえるようなフォームを設計するには、EFOの考え方が参考になります。

EFO(Entry Form Optimization)こと入力フォーム最適化は、入力フォームの持つさまざまな要素を改善し、ユーザーフレンドリーなフォームを目指すものです。

ここからは、EFOに基づいてフォームを設計する際に気をつけたいポイントを4つ解説します。

1. 本当に必要な情報を取捨選択する

▲[良いフォームの例]:口コミラボ編集部作成
▲[良いフォームの例]:口コミラボ編集部作成

フォームに入力する情報の量は、基本的に少なければ少ないほどよいとされています。

例えば、クレジットカードのブランドはクレジットカード番号から判別できるため、わざわざユーザーに選択させる必要はありません。

また、郵便番号も住所から判別できるため、別途入力欄を設ける必要はないでしょう。

中には予約を確定させるために必要な情報とアンケートをまとめて表示している入力フォームも見受けられます。

しかし、このような設計はユーザーにとって入力する情報が多いように感じる一因となります。

そのため、アンケートはアンケートとして明示するか、アンケート用に別の画面を設けるとよいでしょう。

フォームを設ける目的はそこに情報を入力させることではなく、予約フォームであれば飲食店などの予約を完成させること、申請フォームであれば資料などの申請を完成させることです。

目的を明確にした上で本当に必要な情報を取捨選択することで、簡潔でわかりやすいフォームが実現できます。

2. 入力完了までの道のりを明確にする

▲[良いフォームの例]:口コミラボ編集部作成
▲[良いフォームの例]:口コミラボ編集部作成

前項で述べたように本当に必要な情報を取捨選択しても、たとえば予約フォームであれば氏名、連絡手段、予約日時、購入フォームであれば氏名、連絡手段、住所、決済方法など、最低限入力が必要な情報は必ず存在します。

これらの情報を負担なく入力してもらうためには、入力完了までの道のりを明確にすることが大切です。

たとえば、入力が完了した入力欄の色を変えたりチェックマークを表示させることや、入力が完了した割合を表示することで、ユーザーの心理的な負担を大きく減らせます。

3. デバイスごとに最適な大きさのフォームを用意する

▲[良いフォームの例]:口コミラボ編集部作成
▲[良いフォームの例]:口コミラボ編集部作成

パソコン向けに作られたフォームにスマートフォンから入力しようとすると、個々の入力欄が小さかったり全体が一度に表示できないことがあります。

これらの問題は、ユーザーがフォームに入力する際に負担となってしまいます。

スマートフォンからのアクセスを想定したWebサイトにおいてフォームを設計する際は、パソコン向けとスマートフォン向けの2種類を設計し、ユーザーエージェント(どのような環境でアクセスしているのかをWebサイトに通知するもの)に基づいて適切なフォームを表示するとよいでしょう。

4. フォームページに余計なリンクや不必要な情報を入れない

フォームの目的はユーザーに予約や購入などを達成してもらうことですが、フォームページの目的はページに設けられたフォームに入力してもらうことです。

最近では多くのWebサイトで左右どちらかの空きスペースにメニューを表示する「サイドバー」や上部の空きスペースにメニューを表示する「グローバルナビ」が取り入れられています。

しかし、これらの要素をフォームページにも取り入れてしまうことは、フォームページを複雑に見せてしまう一因となり、ユーザーの離脱にもつながってしまいます。

フォームページに設置する要素は必要最低限とし、あくまでもフォームの入力に集中してもらえるようなレイアウトにするとよいでしょう。

入力フォームの改善は離脱率の減少につながる

入力フォームは、飲食店宿泊施設の予約や商品の購入、資料の申請など、さまざまな場面において最後の難関となります。

そのため、入力フォームまでたどり着いたユーザーを入力フォームが原因で離脱させてしまうことは、とても勿体ない事象であるといえます。

このような事態を防ぐためにも、EFOの考え方に基づき入力フォームを改善し、ユーザーフレンドリーな入力フォームを設計することはとても重要です。

現在Webサイト上で使用されている入力フォームでも、EFOに基づいて改善することでより多くのユーザーを獲得できるようになるフォームは数多く存在します。

入力フォームは、ユーザーとの対話ともいわれています。入力フォームの改善によりスムーズなユーザーとの対話を実現することは、更に多くの顧客を獲得することにもつながるでしょう。

口コミラボ セミナー紹介&最新版MEOまとめ

【24年3月版 Googleマップ・MEO最新情報まとめ】


MEOに関わるサービス「Googleマップ」「Googleビジネスプロフィール」や、各種地図アプリ・口コミサイトは日々更新を続けており、その全容を把握するのは難しくなっています。

そこで口コミラボでは、MEO・口コミマーケティングに役立つ最新ニュースをまとめた「Googleマップ・MEO最新情報まとめ」を毎月発行しています。

本記事では、2024年2月〜3月の情報をまとめたレポートのダイジェストをお届けします。

※ここでの「MEO」とは、Google上の店舗・施設情報の露出回数を増やしたり、来店行動につなげたりすることで、Google経由の集客を最大化させる施策を指します。
※『口コミアカデミー 』にご登録いただくと、レポートの全容を無料でご確認いただけます。

詳しくはこちらをご覧ください。
ビジネスプロフィールにSNSの投稿が表示される / 宿泊施設のGoogleビジネスプロフィールでSNS登録が可能に ほか【24年3月版 Googleマップ・MEO最新情報まとめ】

口コミアカデミー 0円すべて無料 口コミサイトの運営やノウハウが学べる、店長限定の無料のオンラインスクール

関連するオススメ記事

    この記事の筆者

    口コミラボ編集部

    口コミラボ編集部

    口コミラボ編集部ではMEO対策、ローカルSEO対策、販売促進店舗の口コミデータをもとにしたコンテンツなどを配信しています。