フォーム磨きも大事!スマホフォームでの最適な見せ方 Ver.2

フォーム磨きも大事!スマホフォームでの最適な見せ方 Ver.2

みなさんこんにちは、かもめです。
最近映画の「ペット」を見て、マックスとデュークの友情の変化に涙しました。

変化って良いことですね!

入力フォームにも変化を。

それでは、前回に引き続き、フォームのレイアウトについて紹介していきます。
フォームにもどんどん変化をもたらせましょう!

Q.さて問題です。下のフォームの中に、もったいないポイントがあります。
それはどこでしょうか?

image09

A.正解は、項目の並び順です。

「入力難易度が高い項目を上部にもっていくべからず」

EFO業界で入力難易度が高いといわれる項目があります。

例えば、

メールアドレス

image08

英字切り替え、入力数が多く、スペルミスしたり、2度メールアドレスを入力するなど、様々なハードルがあります。

パスワード

image10

最近は半角の大文字と小文字+数字+記号を入れて8文字以上など、パスワード設定は入力に悩みます。

あとはニックネーム等です。

逆に入力難易度が低い項目は、

名前

image06

性別

image07

等です。

難易度が高い項目と低い項目の違い

Q.難易度が高い項目と低い項目でどんな違いがあるのか…

A.入力をする際に考えなければならないか否かです。
入力難易度が低い「名前」「性別」は、パーソナルな事柄のため考えずに入力ができます。

逆に、入力難易度が高い「メールアドレス」や「パスワード」「ニックネーム」は、入力内容を考えなければならず、ユーザの手を煩わせてしまいます。

そのため入力難易度が高い項目は、フォームの下部に置いたほうが良いといわれています。

Q.では、なぜ入力難易度が高い項目を下部にもっていったほうがいいのか?

A.上部はまだ入力を始めたばかりなので、離脱しやすいのですが、下部にいくと、項目をある程度入力した後になるため、離脱する事が逆にもったいなくなってしまうのです。

よって、入力しやすい項目をなるべく上部に置き、入力しにくい項目は下部におくと、ユーザがスムーズに入力をする事が出来ます。

◆素敵フォーム

image02

パーソナルな情報を上に置き、離脱が発生しやすいメールアドレス項目を下部に置いています。

このように、項目の置き方を変えるだけで途中離脱率が6%も減った!という事例もあります。

レイアウトを変えるとハードルが低くなる!?

みなさんも、レイアウト変えたいですよね?
でも、ネックといえばやっぱりシステム改修が入ることですよね…

そこで!

な、

なな、

なななんと、フォームアシストでは、システム改修をせずにレイアウトが変更できて、なおかつ簡単にABテストが出来ちゃうんです!

興味があるかたは、こちらまで⇒https://www.showcase-tv.com/reference/fa-css/

皆さんもABテスト等を行い、レイアウトをどんどん良くしていきましょう!

あなたにおすすめ

HTMLを使って会話するコツ Hey, guys! こんにちは、カオツです。 日本人なのになんで英語なんて勉強しなきゃいけないの。 とか言ってられない時代になりましたね。 海外の人とコミュニケーションをとりたいから英語を勉強する。 機械とコミュニケーションをとりたい...
Photoshopの便利なショートカットや効率化する機能を5つ紹介。... どうもこんにちは、南の国からやってきた、やんばるです。 WEBデザイナー時代のバナーデザイン制作時によく使っていたPhotoshopの便利なショートカットや効率化する機能(ツール)をご紹介します。 以前の紹介した記事では、必要な道具7つに...
フォームデザイン実証研究 送信ボタン編... こんにちは! 最近の悩みは山登りをするとひざの痛みが気になること、、、 本日のブログは自然派20代OLことミヤが担当させていただきます。 さて、サイトでCVを上げるためには徹底的にテストを繰り返していくことですが、 今回は日...
CRO | コンバージョン率最適化の手法(第11回)... 今回は「ランディングページの適した長さ」ついてご紹介させていただきます。 <前回のおさらい『CRO | コンバージョン率最適化の手法(第10回)』> ランディングページは長いほうが良い? 訴求ポイントだけを抑えたシンプル...