How can micro-animations help users understand and recover from errors?

Short answer

They intuitively direct attention to the exact problem, such as a slight shake of an incorrect password field, using familiar human motion to signal rejection without dry technical wording.

Explanation

A gentle horizontal shake comes from the human head-shake gesture for "no." When a code or password is wrong, a shaking field immediately draws attention to the reason without requiring a long message. Other useful animations include smoothly scrolling to the first invalid field in a long form so users do not have to search for the reason submission failed.

Common mistakes

• Using violent shakes or flashing red effects that make users anxious and confused.
• Relying on animation without explanatory text telling users how to fix the error.

Follow-up questions

• Why does designing only for the Happy Path fail, and how do you design for edge cases?

Sources

• Material Design — Motion and Error Communication