Webアプリの入力について考える

仙台のコミュニティ「タガヤス」の定期勉強会で発表した資料です。

2020年9月24日(木)開催
「タガヤス その17 ー画面の向こう側に聞かせたいこと」

セッション1
『Webアプリの入力について考える』
概要 : 入力フォーム最適化のすゝめ

Transcript

1. Webアプリの入力について考える ～入力フォーム最適化のすゝめ～ 2020.9.24 タガヤス17 【画面の向こう側に聞かせたいこと】
2. 自己紹介 • 氏名：鶴蒔 亮平（つるまき りょうへい） • 現在の仕事：プロダクトエンジニアとして主にJavaScript製品の 開発を担当 • 2019年9月からグレープシティに入社 • これまでの仕事：自動テストの開発、大学向けのシステム開発など • Webの開発経験は1年半くらい
3. いきなりですが、入力フォームに関する クイズです
4. 入力フォームにたどり着いたユーザがそのページを 離脱してしまう割合はどれくらいだと思いますか？ •A：0 ～ 10% •B：20 ～ 30% •C：30 ～ 40%
5. 正解 •C：30～40% •多い時には70%にものぼる →ユーザの大半は途中で入力をやめてしまっている 参考：入力フォーム離脱率を改善する方法～原因を探り離脱を回避しCVRを上げる
6. 発生してしまう理由 • 入力フォームが使いづらい • 他社の方がいいと判断された • 間違って入力フォームにたどり着いた
7. 入力フォームの最適化のすゝめ • 改善できれば、成約率向上に繋がる • そこで注目されているのが、入力フォームの最適化： EFO (Entry Form Optimisation) 今回はEFOに役立つJavaScriptライブラリをいくつか 紹介させていただきます
8. EFO向けライブラリ その1 YubinBango
9. YubinBango • 郵便番号を入力するだけで、自動で住所を取得できる ライブラリ • 公式ページ • https://yubinbango.github.io/ • GitHub • https://github.com/yubinbango/yubinbango
10. 使い方 • YubinBangoライブラリを参照に追加する • 都道府県名や市区町村など、取得したい住所 に応じて、該当のクラスを指定する(例：県名な ら"p-region"、市区町村なら"p-locality"など) • 詳しい使い方はこちらで確認できます
11. 動作と追加の説明 • 取得できる住所データは、郵便事業株式会社が提供している データに基づきます • そのため入力する郵便番号によっては、番地などが取得できな いこともあります(上記の例だと3-1-4など)
12. FormPersistence.js EFO向けライブラリ その2
13. FormPersistence.js • フォームデータを永続化できるライブラリ • 何らかの不慮のため入力したフォームの内容が消えて しまうことを防止できる • GitHub • https://github.com/FThompson/FormPer sistence.js
14. 使い方（フォームを永続化する例） • FormPersistenceライブラリを参照に追加する • フォーム要素をFormPersistenceクラスのpersistメソッ ドに指定する
15. 動作
16. 追加の説明 • 他のメソッド（saveやload）を使うことで、好きなタイミングで データを保存したり復元したりできる • デフォルトでlocalStorageに保存されるが、オプションで sessionStorageに変更することもできる • ブラウザ標準のlocalStorageでも同じことができるが、 FormPersistence.jsを利用したほうがはるかに簡単（フォームの 永続化なら、JavaScriptコードで僅か2行）
17. GrapeCity製品 InputMan.js（宣伝タイム）
18. InputManJSのすゝめ？ • テキスト、マスク、日付時刻など用途別に最適化された入力用コント ロールを収録したJavaScriptライブラリ • EFOに役立つ様々な機能があります • プレースホルダーの表示、入力完了時の自動フォーカス、ふりが なの自動取得、入力検証とエラー通知のカスタマイズなどなど • これらを簡単に実現できます • 気になった方は是非、デモサイトで製品をお試しください！ • EFOについては、GrapeCity devlogでも紹介しています！
19. まとめ
20. まとめ • 入力フォームでは、半数くらいのユーザは入力の途中で離脱して しまう • EFOを実現するために、世の中にはたくさんライブラリがある • 今回ご紹介させていただいたものはEFOを実現するための一部 • ライブラリを追加して便利にしたり、使いやすいUIを設計したりし て、よりよい入力フォームを目指していきましょう！
21. ご清聴ありがとうございました！