LoginSignup
52
54

More than 3 years have passed since last update.

入力フォーム改善(EFO)に関する情報まとめ

Last updated at Posted at 2016-03-11

これまでブックマークしてきた入力フォーム改善(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年前の情報なので、改善されているものもあるかも。

52
54
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
52
54