フォームの対話 — 入力を助けるアニメーション
フォームは「作業」の場です。ユーザーは情報を入力することに集中しており、アニメーションが気を散らせてはいけません。しかし「今どのフィールドにいるか」「何が間違いか」は、動きで伝えるべきです。
フォームのアニメーションの原則は 「邪魔しない、でも必要なことは伝える」 です。
フォーカスの表現
フィールドをクリックして、フォーカス時の表現を比べてみてください。
左：色変化のみ / 右：フローティングラベル+グロー。フィールドをクリックして比較
フローティングラベルは「placeholder と label の兼用」です。入力前はプレースホルダー的に見えて、フォーカスすると上に浮き上がってラベルになります。「今入力中のフィールドが何か」が常に分かります。
バリデーションのタイミング
エラーをいつ表示するか——これはフォームの使いやすさに直結します。
左：入力中にすぐ（うっとうしい）/ 中：blur後（適切）/ 右：送信後のみ（遅すぎる）
エラーの shake
エラー時にフィールドがshakeするのはなぜか——「No」という意味の首を横に振るジェスチャーと同じだからです。赤色 + shake の組み合わせで「ここが間違い」が本能的に伝わります。
パスワードを5文字以下で入力して「登録する」を押すとshakeが発動。6文字以上で成功
入力の進行感
パスワードを入力するほど色が変わる強度インジケーター。ユーザーは「あと少し」と感じてより強いパスワードを作るようになります。
入力するほどバーが伸び色が変わる。「あと少し」という感覚がより強いパスワードを生む
送信成功のお祝い
フォームが完了した瞬間——これは達成感を与えるチャンスです。
「送信する」をクリックするとフォームがフェードアウトし、成功画面がbounceで現れる
フォームが消えて成功画面が現れる——この「入れ替わり」のアニメーションが「完了した」という達成感を生みます。チェックマークの bounce は「やった！」という感情のミラーリングです。