This is standard

KAIZEN PLATFORM社が提供するA/Bテストプラットフォームにてグロースハックを行っているフリーランサーのサイトです。

[グロースハック]スマホのフォームをkaizenするときにチェックすること

      2016/11/21

スマホのフォームをkaizenするとき、8つのことをチェックポイントとしています。
今回はこの8つのポイントをご紹介します。

1.入力しやすいか
2.タップしやすいか
3.ステップ画像がわかりやすいか
4.必須項目と任意項目がわかりやすいか
5.placeholderは入っているか
6.フォームの長さは適切か
7.CVボタンの色
8.離脱につながる要素はないか

form

サンプルフォームです。なんだかんだBootstrapはよくできてるなーと思います。

1.入力しやすいか
基本中の基本ですね。自分がユーザーの立場だったら入力しやすい方がいいにきまってるし、なんか入力しづらいな、、、と感じれば後回し(離脱)にしちゃいますよね。

2.タップしやすいか
余白がなく、つまった印象のフォームや、余白を取りすぎているフォームはタップしにくいですよね。フォームはタップして入力するので、タップしやすいかも重要なポイントです。
また、チェックボックスが複数あるフォームは考慮したいポイントですね。

3.ステップ画像がわかりやすいか
今自分がどこにいるか示すSTEP画像が設置されているかチェックします。
ステップ数が少ないほど離脱率がさがると言われているので、最近ではステップ数を減らし「簡単60秒で登録完了!」といった見出しをつけるケースも多いですね。

4.必須項目と任意項目がわかりやすいか
必須項目には「必須」アイコンをつけますが、任意項目にアイコンをつけるケースは少ないです。
任意アイコンをつけることで、迷いがなくなり、離脱率がさがるのではないかと考えています。

5.placeholderは入っているか
こちらは重要ではないのですが、サンプル入力例が余白だと考えられなくもないですよね。
その場合placeholderに入力例をいれてしまえば、スペースを取らなくて済むし、分かりやすいのでおすすめです。
またスマホの場合、親切すぎる説明はかえって離脱率をあげる傾向にあるようです。ユーザーのリテラシーにあわせて説明を入れるか判断するといいと思います。

6.フォームの長さは適切か
入力項目が多いフォームはページが長くなります。
仕方のないことですが、ページが長いと離脱率が高まる傾向にあるようです。
見出しと項目を並列にしページの長さを調節したり、余計な余白を削除するなど改善するといいと思います。

7.CVボタン
どのフォームもボタンの色は目立つ色を選んでいますし、よく考えられています。
余談ですが、よくオレンジや緑がCVが高いと言われています。
ですが、フラットデザインの流行でボタンなのか、タップできるのか迷うボタンが多いように思います。
やはりボタンはタップできると一目でわかるデザインがCV率をあげると思います。

8.離脱につながる要素はないか
最後になりますが、フォームページにキャンペーンなどのバナーを置いているケースがあります。
有益な情報でも離脱につながるため、フォームへ誘導しているLPなどでしっかり説明し、バナーは極力おかない方がいいと考えています。

以上が私が個人的にスマホのフォームをkaizenするときに気をつけている8つのポイントです。
ご参考ください。

あわせてお読みください。
[グロースハック]スマホのショッピングカートをkaizenするときにチェックすること

 - Tips, グロースハック, 施策・仮説

  関連記事

ECサイトで使いたい!カウントダウンをjavascriptで実装する

新作商品販売まで後◯◯日!のようなカウントダウンをjavascriptで実装する …

[グロースハック]PC版広告用LP改善でA/Bテストを実施しました。

※申し訳ございません、都合上クライアント名・デザイン画像の掲載は控えさせていただ …

[jQuery]id順に要素を並び替える

idを付与して並び替える方法の覚書です。 parseIntで並び替える方法もあり …

CSS3でグラーデーションのアニメーションをつける

タイトルをみると???かと思いますので、デモをご覧ください。 ※古いブラウザでは …

LPで使えるjQueryアニメーションボタン2

ボタンにきらっと光るアニメーションを入れる方法をご紹介します。 デモページはこち …

各ショップカートAPIでGoogleアナリティクスのeコマースを設定するには

旧アナリティクスからユニバーサルアナリティクスに変更する時は色々と注意点がありま …

[グロースハック]申込フォームのA/Bテストの改善事例

※申し訳ございません、都合上クライアント名・デザイン画像の掲載は控えさせていただ …

[jQuery]Kaizenをするときによく使う覚書

Kaizenをするときによくつかう、jQueryの覚書です。 ■やじるし [cr …

jQueryでA/BテストができるプラグインeasyAB

LPなどのA/Bテストを簡単に実施できるjQueryプラグインeasyABのご紹 …

.htaccessの覚書

■メンテナンス画面 [crayon-5b73eec7d0eca370287763 …