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

 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. ご清聴ありがとうございました!

  22. None