これまでブックマークしてきた入力フォーム改善(EFO)関連の情報をまとめました。もしかしたら古い情報もあるかもしれません。
総合的な改善
入力フォームを改善して入力完了率を上げる! エントリーフォーム最適化15カ条 | 勝手にEFO分析-エントリーフォーム改善 | Web担当者Forum
15回にわたって有益な情報が提供されている。まずはこれをすべて読む。
今どきの入力フォームはこう書く! HTMLコーダーが抑えるべきinputタグの書き方まとめ - ICS MEDIA
自動入力への対応や、スマートフォンへの最適化などの実装例。
スマホに最適化させたエントリーフォーム 〜3つの基本方針〜 – NET BIZ DIV. TECH BLOG
スマートフォンに最適化した UI 設計。
モバイルにおける入力フォームデザインのためのチェックリスト – U-Site
モバイル向けフォームの UI 設計検討項目が、チェックリストとしてまとめられている。
分かりやすいWeb入力フォームのための十戒 | デザイン | POSTD
UI デザインの基本10か条。
ユーザーエラーの防止:無意識なスリップの回避 – U-Site
制約やデフォルト値の与え方で、エラーを減らす UI 設計。
How To Build An Awesome Form — Medium
いいフォームを作るための様々な視点とそのステップ。
The current state of web forms by Kevin Suttle on CodePen
現状のブラウザの問題点と、その改善方法の解説。
10 Rules For Efficient Form Design
基本的な UI のルール。
UI デザイン
Which Input When? — Morgan Carter — Product Designer
フォーム UI の使い方の解説。
Styling & Customizing File Inputs the Smart Way | Codrops
ファイルアップロードの UI のデザイン改善の具体的な実装方法。
Design Better Forms — uxdesign.cc – User Experience Design
フォーム UI の Good / Bad を具体的なイメージで説明。
エラーメッセージはフォームのどこに表示するべきか | UX MILK
フォームの入力エラーメッセージをどこに表示するかの考察。
自動入力
Google ウェブマスター向け公式ブログ: オンライン フォームを入力しやすくするために
Chrome の「autocomplete」属性サポートのアナウンス。
Enabling Password AutoFill on an HTML Input Element
iOS 等でオートフィルを有効にする HTML のマークアップ仕様。
Google Maps Javascript APIでフォームでの住所入力を自動補完する・「Autocomplete for Addresses and Search Terms」 - かちびと.net
タイトル通り。
Algolia Places
住所の自動補完。
バリデーション(入力エラー処理)
Form Validation Techniques
フォームのバリデーションの実装例。CSS や JavaScript のコードを交えて解説。
Form validation best practices – Andrew Burton – Medium
バリデーションの UI 実例集。様々な事例を紹介。
クレジットカード・支払い
[iOS8]クレジットカード読み取りに対応したフォームの作り方 - Qiita
カメラを使ったクレジットカード番号読み取りの方法。
The anatomy of a credit card payment form — Gabriel Tomescu
クレジットカード入力フォームのデザイン例。各入力項目ごとに詳しい解説がある。(英語)
Payment Request API で簡単・高速な決済を実現する | Web | Google Developers
支払い方法・配送先住所・配送方法を、簡単・高速かつ一貫した方法でユーザが選択・追加できる、ネイティブユーザインタフェースを提供。現状、Android Chrome が対応。
ラベリング
入力フォームの「必須」「任意」のラベルは両方付けないとコンバージョン率が下がる | 海外SEO情報ブログ
Why Users Fill Out Less If You Mark Required Fields - UX Movement
「必須」「任意」のラベルのつけ方について。2つの記事で結果が違うのは、言語(文化?)によるもの?
パスワード
横柄なパスワード – パスワード認証に関する改善策 | デザイン | POSTD
パスワードあるあると改善提案。
ユーザーにパスワードを変えたことを思い出させる方法 | UX MILK
細かい気遣い。
実は危険な“秘密の質問”、Googleが研究結果を発表 -INTERNET Watch
Google の調査結果。
ライブラリ
Smoke
Bootstrap 向けのフォーム用ライブラリ。パスワードの強度や一致などのチェック機能もある。
事例集
20 Awesome Form Designs Visitors Want To Fill Out
おしゃれなデザインのフォーム事例。
こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 - マミオン有限会社-シニアマーケティング、ウェブユーザビリティ評価
改善内容を実際のフォームでわかりやすく解説。
調査
100のフォーム調査から判明した、購入フォームの傾向(海外EFO情報) | UI改善ブログ by f-tra
購入時に会員登録やメルマガ登録などを求めているサイトの数の調査。
Form Inputs: The Browser Support Issue You Didn’t Know You Had – Smashing Magazine
ブラウザの対応状況について。1年前の情報なので、改善されているものもあるかも。