Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
EFO(入力フォーム最適化)のセオリーを詰め込みまくった
汎用コーポレート用メールフォーム
野村 圭 Kei Nomura
@mypacecreator
Frontend Nagoya #3 LT
2018. 01. 27 Sat
ozn-fo...
野村だよ!
Kさんでもいいよ!
ところでみなさん、
フォーム難民じゃないですか?
2016年12月のある日
野村さん!EFOやりたいから
めっちゃ使いやすいフォーム作って!
お金は出すよ!某クライアント様
チャンス到来!!!
信頼するプログラマに相談
PHP
JavaScript
HTML
CSS
お金の工面
「私の案件で使いたい」フォームを共同開発
作りました!
詳細経緯はブログに書いてあります。
https://mypacecreator.net/blog/archives/3232
主な機能
リアルタイムバリデーション
特にメールアドレスでは、エラー内容を細かく指摘
ドメインサジェスト
入力ミスを防ぎ、手間も軽減
フリガナ自動補完
キー入力を感知し、対応するフリガナ欄に
カナを自動入力させることが可能
全角英数字・半角カナ等の自動変換
ユーザーが全角英数字や半角カナで入力を
しても検証エラーを出さず、入力終了時に
半角英数字・全角カナに自動変換
• Datepicker UI
• 郵便番号から住所補完
• ファイル添付機能
• 離脱防止アラート
• 送信ボタンの二重クリッ
ク防止
• エンターキーでの誤送信
防止
• 条件付き必須判定
• SMTP送信可能
• 複数フォーム設置対応
•...
詳しくは公式ページを見て!
https://www.ozonenotes.jp/ozn-form/
ご依頼主様からは
使いやすくなった!
CV率もちょっと良くなった!
他のサイトにも自分で設置できた!某クライアント様
おかげさまで好評でした
自分の他の案件でも
使い回しが楽に!
みんなハッピー!!
…というだけじゃなかった
他のクライアントからの
フィードバック
必須アイコンの圧、強くない?
真っ赤はやだなー
てか※マークでよくない?別のクライアント様
実は、「必須」の印象の強さを気にされる
クライアント様、わりと頻繁に出会います
この案件では色を薄くしました
一部の携帯メールの人がエラーになる
みたいで、何度も何度も入力
してくるお客さんがいるんだよね別のクライアント様
未だ根強い
キャリアメールRFC違反の闇
キャリアメールRFC違反問題とは
masato.…love…123456@doco(略)
123456.masato.love.@ezw(略)
(例)
• ドットなどの記号が2個以上連続している
• 先頭や@の直前にドットなどの記号がある
※さ...
ライブラリの改変はしたくないので
送信不可の時とそれ以外のエラーで画面
を分岐して、お客様の不安を軽減
PHPMailerではRFC違反のアドレスに
メール送信しないようになっていた
メールアドレスのドメイン選ぶやつ、
なんか@マークがだぶるんだけど
別のクライアント様
???
好評のはずのドメインサジェストで謎挙動
• 日本語キーボードの英字入力モードを使うと、
変換未確定部分が補完部分の後ろにくっつく
• iOS11の標準キーボード限定
• iOS10, 標準キーボード以外(Gboard等),
Android では発生せず
対策いまだ不明。
suggest.js ってライブラリ自体が持っている問題、
というところまではわかった
だれかわかる人! 教えて!!!
なにはともあれ、
とっても学びがあった
モニター・開発コミッター
募集中!
現状は有償・クローズド開発ですが
Frontend Nagoyaで聞いたよ、とご連絡ください
(再)公式ページはこちら
https://www.ozonenotes.jp/ozn-form/
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

EFO(入力フォーム最適化)のセオリーを詰め込みまくったメールフォームを共同開発した

245 views

Published on

時間の都合でカットしたスライドや動画を埋め込んだ完全版はこちらです。 https://ozn.pw/frontendnagoya180127/
こちらのスライドは簡易版です。

Frontend Nagoya #3 LT 2018. 01. 27 Sat
EFO(入力フォーム最適化)のセオリーを詰め込みまくった汎用コーポレート用メールフォーム ozn-formを共同開発したのだが

Published in: Internet
  • Be the first to comment

EFO(入力フォーム最適化)のセオリーを詰め込みまくったメールフォームを共同開発した

  1. 1. EFO(入力フォーム最適化)のセオリーを詰め込みまくった 汎用コーポレート用メールフォーム 野村 圭 Kei Nomura @mypacecreator Frontend Nagoya #3 LT 2018. 01. 27 Sat ozn-formを共同開発したのだが オゾン・フォーム
  2. 2. 野村だよ! Kさんでもいいよ!
  3. 3. ところでみなさん、 フォーム難民じゃないですか?
  4. 4. 2016年12月のある日 野村さん!EFOやりたいから めっちゃ使いやすいフォーム作って! お金は出すよ!某クライアント様 チャンス到来!!!
  5. 5. 信頼するプログラマに相談 PHP JavaScript HTML CSS お金の工面 「私の案件で使いたい」フォームを共同開発
  6. 6. 作りました! 詳細経緯はブログに書いてあります。 https://mypacecreator.net/blog/archives/3232
  7. 7. 主な機能
  8. 8. リアルタイムバリデーション 特にメールアドレスでは、エラー内容を細かく指摘
  9. 9. ドメインサジェスト 入力ミスを防ぎ、手間も軽減
  10. 10. フリガナ自動補完 キー入力を感知し、対応するフリガナ欄に カナを自動入力させることが可能
  11. 11. 全角英数字・半角カナ等の自動変換 ユーザーが全角英数字や半角カナで入力を しても検証エラーを出さず、入力終了時に 半角英数字・全角カナに自動変換
  12. 12. • Datepicker UI • 郵便番号から住所補完 • ファイル添付機能 • 離脱防止アラート • 送信ボタンの二重クリッ ク防止 • エンターキーでの誤送信 防止 • 条件付き必須判定 • SMTP送信可能 • 複数フォーム設置対応 • 1つ前のページから情報 の引渡しが可能 • 履歴のCSVダウンロード • 空項目は、確認画面や メール文面で非表示に
  13. 13. 詳しくは公式ページを見て! https://www.ozonenotes.jp/ozn-form/
  14. 14. ご依頼主様からは 使いやすくなった! CV率もちょっと良くなった! 他のサイトにも自分で設置できた!某クライアント様 おかげさまで好評でした
  15. 15. 自分の他の案件でも 使い回しが楽に!
  16. 16. みんなハッピー!!
  17. 17. …というだけじゃなかった
  18. 18. 他のクライアントからの フィードバック
  19. 19. 必須アイコンの圧、強くない? 真っ赤はやだなー てか※マークでよくない?別のクライアント様
  20. 20. 実は、「必須」の印象の強さを気にされる クライアント様、わりと頻繁に出会います この案件では色を薄くしました
  21. 21. 一部の携帯メールの人がエラーになる みたいで、何度も何度も入力 してくるお客さんがいるんだよね別のクライアント様 未だ根強い キャリアメールRFC違反の闇
  22. 22. キャリアメールRFC違反問題とは masato.…love…123456@doco(略) 123456.masato.love.@ezw(略) (例) • ドットなどの記号が2個以上連続している • 先頭や@の直前にドットなどの記号がある ※さすがに今は新規での登録はできなくなったけど、今でもこの形式のアドレスは相当数存在
  23. 23. ライブラリの改変はしたくないので 送信不可の時とそれ以外のエラーで画面 を分岐して、お客様の不安を軽減 PHPMailerではRFC違反のアドレスに メール送信しないようになっていた
  24. 24. メールアドレスのドメイン選ぶやつ、 なんか@マークがだぶるんだけど 別のクライアント様 ???
  25. 25. 好評のはずのドメインサジェストで謎挙動
  26. 26. • 日本語キーボードの英字入力モードを使うと、 変換未確定部分が補完部分の後ろにくっつく • iOS11の標準キーボード限定 • iOS10, 標準キーボード以外(Gboard等), Android では発生せず
  27. 27. 対策いまだ不明。 suggest.js ってライブラリ自体が持っている問題、 というところまではわかった
  28. 28. だれかわかる人! 教えて!!!
  29. 29. なにはともあれ、 とっても学びがあった
  30. 30. モニター・開発コミッター 募集中! 現状は有償・クローズド開発ですが Frontend Nagoyaで聞いたよ、とご連絡ください
  31. 31. (再)公式ページはこちら https://www.ozonenotes.jp/ozn-form/
  32. 32. ご清聴ありがとうございました。

×