ウェブとフロントエンド · 入門

フォーム:最もユーザーが崩れる部分

一行でいうと: 良いフォームは少なく聞き、適切なタイミングで確認し、エラーが起きた場所でそれを説明し、入力したものを消去しない。

フィールドを減らす

各フィールドは完了率を下げる。各フィールドに聞く:明日の朝これで何をするか?答えが曖昧なら、削除するかオプションにする——そして明示的にそれを示す。

長いフォームを見えるプログレスのあるステップに分割し、下書きを保存する。間違って閉じて十分間失ったユーザーは戻らない。

適切なタイミングでのバリデーション

初めて入力中のフィールドに怒鳴るな。フォーカスが外れたときに確認し、リストではなくフィールドの隣にメッセージを表示する。

エラーメッセージは何が起きたか、何をすべきかを言う:「電話番号は05で始まるべきです」であって「無効な入力」ではない。

プロフェッショナルに感じる詳細

モバイルでの適切なキーボードタイプ、有効化されたオートコンプリート、エラーのある最初のフィールドへのフォーカス、重複を防ぐための送信中のボタン無効化、実際に起きたことを言うサクセスメッセージ。

さらに深く

サーバー側でも常にバリデートする。ブラウザのバリデーションはUXであってセキュリティではない——どのリクエストも直接送れる。そして、インターフェースが推測なしに正しい場所に表示できるよう、フィールド属性付きの一貫した形式でサーバーエラーを返す。