エラーを視覚的にフィードバックするアニメーション

パスワードを入力してエラーになった際のアニメーションを作ってみました。

ユーザーが入力に誤りがあったことを即座に認識できるように意識したポイントは以下の3つ。

①ブルッと横に震えるアニメーション

このアニメーションは入力に間違いがあったときによく使われていますね。

現実世界でも人が「NO」を示す際に首を横にふることから、横に震えるアニメーションが誤りを示すことは理解しやすい。

②「Password」の文字を残す

入力前に表示されている「Password」という文字を、入力中にもうっすら表示させておくことで、ユーザーが何を入力しているのかを常に把握できる状態にしています。

③赤くなって下に落ちるアニメーション

入力が誤りだったことをより強調するために、色を赤に変えて下に落下するアニメーションを追加しました。

重要なフィードバックは少し強めのアニメーションで表現することで、見落としを防止することができます。