エンジニアから提案したいEFO(入力フォーム最適化)のアイデア集
株式会社バイオフィリアという会社でマーケター兼エンジニア兼COOをしているやはぎ@yahagi1989です。
ココグルメというドッグフードのD2Cをやっています。
学生エンジニアから始まり 12年ほどエンジニアを続けていましたが、およそ5年前にマーケティングと事業作りへと主なロールが変わりました。
マーケター視点だと気付きにくく、エンジニア側が提案してあげたいEFO(入力フォーム最適化)のアイデアを集めました。
EFO(入力フォーム最適化)とは
EFO = Entry Form Optimization(入力フォームの最適化)です。
デジタルマーケを踏み込む領域だとCVR1%の差で、毎月の広告費が数十万円ペースで削減できます。
そんなCVRに最も影響を与えるのが「入力フォーム」の使い勝手です。
宣伝
弊社ではマーケティング成果・事業成果を最大化するために何ができるか？を考えて日々開発をやってます！
- 本当はビジネス作りに興味があり、手段としてエンジニアをしている
- 一通りがコードを書けるが マネジメント方面以外でもキャリアを模索したい
という方、ちょっとでも興味があればぜひお気軽に話しましょう！
アイデア集
思いつき次第徐々に追記してきます。
メールアドレスの自動正規化
メールアドレスはブラウザのオートコンプリートで埋められるケースが多いですが、精度がイマイチ。
弊社実績でも1~3%の入力が
- メールアドレスが何故か2つくっついて入力される
- 誤字が混じっている
- .(ドット)が大文字になってる
などの気づきにくい間違いが含まれており、これらはブラウザのオートコンプリートによる影響です。
通常のフレームワークのバリデーション機能を使うと、購入意向が高いのにサイレント離脱してるケースが多発します。
バリデーションをはずすか、正規表現でこれらを一つ一つ除外していく設定を入れておくのがおすすめです。
入力済フォームでのオートコンプリート無効化
オートコンプリートは便利ですが開発者視点だと魔物です。
一番バグる元になるのは、
フォーム下部の入力内容でオートコンプリートを適用したら、一度入力した上部の入力内容も連動して変更してしまうことです。
(ユーザーが気づかずに入力内容が変更されてしまう)
オートコンプリートを無効化するのも選択肢の一つですが、
住所入力やメールアドレス入力はスマホだと負担が大きくなります。
そこで一番おすすめなのは、フォームが空欄であればオートコンプリートを有効に、フォームに入力内容があればオートコンプリートを無効にする、というテクニックです。
カナ名の自動入力
システムの都合で漢字名だけではなくカナ名が必要になるケースがあります。
その際はカナ名は漢字名入力欄のキーボード操作に連動してカナ名を作ることができますので、設定しておくのがおすすめ。
オートコンプリートだとうまく発動しないんですが。
JIS第2水準文字の自動置換
決済代行会社や配送業者に住所情報を外部サービスに連携する必要がある場合、JIS第2水準以降の文字がバリデーションで弾かれるケースがあります。
(接続先のシステムが古い場合よくある)
なので、自社システム内部でJIS第2水準以降の文字を、第一水準に無理やり置換する実装をしておくと良いです。
名前系の入力でよく発生するので、自前でハッシュテーブルを作ってしまうのがおすすめです。
郵便番号と住所の自動判定
郵便番号を外部APIから取得して、住所欄の入力フォームを置き換える実装は絶対した方がいいです。
同時に郵便番号がわからない方も一定数いて、その人たちのために住所欄から郵便番号を逆引きする実装も必要です。
両軸での自動判定を入れることで、CVRは最大化できます。
ちなみに郵便番号と市区町村までの住所は1対多であり、同じ郵便番号でも、市区町村名が違う、というケースもあるし、郵便番号と市区町村名の対応はコロコロ変わるので要注意です。
メールアドレスの利用済み判定
多くのシステムでメールアドレスはUniqueに設定すると思います。
メールアドレスのバリデーションは非同期で入力直後に動かしてあげるのがおすすめ。
入力フォームを全て入れ終わって送信したあと送信後の画面まで確認しない人もいるので、「送ったと思ったら送れてなかった」が弊社実績でも1％くらいいます。
そしてそのエラーメッセージは「利用済みです」だけではなく、「利用済みです。ログインの場合はこちらからどうぞ」まで作り込んであげるのがおすすめです。
onchangeではなくonkeyupでバリデーションする
バリデーションはonchangeではなくonkeyupで発火するように設定します。
onchangeはフォーカスが外れた時にだけ発火します。
この場合入力している途中にバリデーションが発火しないという問題もあり、
フォーカスを押したままエンターキーを押したり、送信ボタンをタップしてしまった場合発火しません。
なのでonkeyupで発火させるのがおすすめです。
作成中
これら以外にも思い出したら追記してきます。
Discussion