UIまとめシリーズ「入力フォーム編」前編

改善太郎
433

はじめに

会員登録や、資料請求、商品購入など、サイトのゴールを達成する為に必ず必要になる「入力フォーム」はサイト改善でもまず最初に手を付ける!ということが多いのではないでしょうか。

今日は、UIまとめシリーズ第一弾ということで、色々なサイトの入力フォームをまとめてみたいと思います。

本日のサイトラインナップ

入力フォームをご紹介するにあたり、今回取り上げるサイトをご紹介します。

サイトのタイプによって入力フォームにも特徴が出ると思いますので、様々なサイトをピックアップしてみました!

○EC系
Amazon


○広告メディア系
カーセンサー


○SaaS系
freee

○LP系
引越し侍

○SNS系
Facebook

今日は、この5種類についてご紹介をさせて頂き、次回の記事では各種サービスタイプ内でもいくつか比較してみたいと思います。

EC系:Amazon

言わずと知れたグローバルNo1ECサイトの「Amazon」です。

TOPページはレコメンドの嵐で無茶苦茶複雑になってますが、新規アカウント登録画面は実にシンプル!
スマホのファーストビュー内にきっちりと全項目が収まってますね!

入力フォームのポイント①
ファーストビューにCVボタンを設置する

これは本当にどのサイトでも通用する、入力フォームの勝ちパターンの一つだと思います。

ファーストビューにCVボタンがあるかないかで、入力フォームに入力するカスタマーの心理的負荷に大きな違いが出ると考えられております。

ファーストビューにCV導線がないと、「この入力項目いつまで続くんだろうか。。」って形で、負荷を感じて離脱されてしまうってことですね。

こちらの画面は、Eメールアドレスを入力せずに、「新規登録」ボタンをクリックした時の画面です。

入力フォームのポイント②
入力ミスがあった場合は、どこでミスが発生しているかを明確に可視化する

エラー画面は特にカスタマーが離脱されるポイントなので、極力カスタマーが混乱を招かないように、次に何をすれば良いかが明確になるようなサポート機能をつけてあげましょう。

ちなみに、Amazonでは対応されてませんでしたが、CVボタンを押したタイミングでミスを指摘するのではなく、入力項目を入力し終えた時点でミスを指摘してあげることで、あとから確認に戻る手間を減らすというのも良くあるパターンですよね。
例えば、メールアドレスとして最低限必要な@マークなどのお作法が担保できていないことを確認し、そのタイミングで「適切なメールアドレスが入力されておりません」と表示したり、既に利用されているメールアドレスが入った時点で「そのメールアドレは既に使用されております」と出してあげることで、ミスをした時点で気がつくことができます。

(きっとAmazonは新規獲得よりも、既存カスタマーの活性化の方が改善ボリューム多いと思うので、そこまで丁寧にはやってないんだと思います。)

広告メディア系:カーセンサー


中古車サイト最大手のカーセンサーの入力フォームは特徴的ですね!

こちらはスマホのブラウザ版サイトなのですが、チャット形式の入力フォームが実装されております。

入力フォームのポイント③
カスタマーの入力負荷を低く感じさせる

チャット形式の入力項目にするメリットは、入力項目が少なく見えることですね。
少なくとも最初の画面上には質問が一つしか見えていないので、最初の印象を少なく抑えることができます。

一般的なサイトの場合、入力項目の一問目の回答率が極端に低く、それ以降は安定して入力を進めてくれるケースが多い為、こういった施策によって最初のハードルを下げることは非常に有効な手段だと思われます。

また、最初の一問目をフリーテキストではなく「選択形式」から聞いているのもポイントかと思います。
出来るだけカスタマーに負荷を与えずに最初の一問目に回答しやすくさせることで、フォームの入力負荷を低くすることができますね。

ちなみに、質問に回答すると、同じページ上でQAが続いていきます。

入力フォームのポイント④
入力項目の確認をスムーズにさせる

一問一答形式の場合、一つ目の回答を終えると、ページ遷移が走り、次の質問画面に移る形式も多く見かけますが、これだと、もし間違えてしまった際も修正がしにくいですし、直前の内容を確認したくても見れないという課題が生じてしまいますね。

入力フォームのポイント⑤
極力画面遷移を少なくする

そういったページの場合、最後に「確認画面」を入れるケースもあると思うのですが、これはこれで画面遷移が増えてしまい、カスタマーに手間を与えることになります。

一般的に画面遷移が増える度に、カスタマーに待ち時間を与える可能性がある為、それに応じて離脱の数も増える傾向にあります。

無駄な遷移は減らして、シンプルなサイト構造になるように心がけたいですね。

SaaS系:freee

もしかしたら、freeeはPCからの登録の方が多いかもしれないですが、統一感を理由にSPブラウザ版で確認しますね。

ちなみにfreeeは個人事業主やベンチャー企業向けのクラウド型会計ソフトを提供しているサービスです。確定申告なんかでも利用することが増えましたよね。

入力フォームのポイント⑥
対象カスタマーに応じて、入力項目を出し分ける

freeeの特徴として面白いのは、最初の一問目の質問で「個人事業主」か「法人」かを確認するところですね。

実は「法人」をクリックすると入力項目が少し増える形になってます。

最初からこの入力項目を見せるよりは、最初の印象を少なく見せることが出来ますし、「個人事業主」の場合は、そもそも不要な入力項目だったりするので、余計な離脱を防ぐことができます。

入力フォームのポイント⑦
必要項目が完了するまで「CVボタン」を押させない

画像だとわかりにくいかもしれませんが、実は最初の1枚目の「Freeeを始める」は入力項目がすべて埋まっていないと、クリックすることができません。

入力項目を埋めることで、非活性状態だったCVボタンがクリックできるようになります。

これの良いところは、早めにカスタマーにミスに気付いてもらいやすくするところですね。

また、画面遷移を発生させないので、無駄な離脱も防ぐことができます。

(あとは、開発観点でも無駄にエラー画面とか作らなくて良いので、楽ですよね)

入力フォームのポイント⑧
SNSアカウント利用した簡易ログイン機能の実装

特に入力項目が多いサイトなんかだと、これがあると非常に便利ですよね。

カスタマーの入力へのハードルを下げることができると思います。

ただ、最近SNS連携しても、あまり挙動がうまくいかないケースを度々見かけます。

これはおそらくSNS側の仕様が変更になったり、自社サイトの入力フォーム側の仕様変更があった場合に、SNS連携のAPIとの接続がうまく行かなくなってしまったのだと思います。

当然こうなると離脱の要因になってしまいますので、運用保守観点では注意が必要ですね。

長くなってしまったので、後半は次回!

前半3つで結構長くなってしまったので、前半後半で記事を分けますね。

3つのサイトのみですが、各社ごとに特徴があって非常に勉強になると思います。

ただ、実は入力フォームで大事なのは、どんなサイトでも共通するお作法をまずは徹底的に抑えるということなんですよね。

他のページと比較すると、カスタマーセグメントやペルソナによる傾向の変化が少なく、王道の勝ちパターンが明確だったりするので、まずは最低限を担保すること。

それだけでも結構な改善インパクトを生み出すことが可能です。

それでは、後半戦も楽しみにしていてくださいね!
(後半戦はまた来週)

記事スコア: 433

改善太郎の他の記事も読む

  • 認知的ウォークスルー『マイナビ転職編』

    はじめにはじめまして。改善太郎です。今日は普段から、色々なサイトのUX改善を担当している私が、とある架空のペルソナになりきって認知的ウォークスルーに取り組んでみたいと思います。読んでいる皆さまもペルソナになりきったつもりで、一緒にサービスを体験してみて、課題に 続きを読む