The Best Place for Error Messages on Forms

The Best Place for Error Messages on Forms

https://uxmovement.com/forms/the-best-place-for-error-messages-on-forms/

 

Top of Form Validation Vs. Inline Validation

• 从上往下看比较省力

User Preference of Error Message Locations

• 从左到右去看 error，比较顺

Why Right of the Field Is Best

• 不同国家阅读方式也不一样，而我们是左到右去阅读

Why Left of the Field Is Worst

• 不自然

Why Above the Field Increases Cognitive Load

• 除了不自然，还有会跳一下

Best Error Message Location for Mobile Forms

• 空间不够，最好的位置是下方

Right of Field Vs. Below Field: Which Is Best?

• 空间小就放置在下方，空间大就放置在右方

• 看开发成本而定

• Chrome 2021 年推出了 new responsive， 这可以节省开发成本，但是不知道要等多久
  https://web.dev/new-responsive/

How to Make Your Form Error Messages More Reassuring

https://uxmovement.com/forms/how-to-make-your-form-error-messages-more-reassuring/

• 不要用 negative word
  

• 以橙色或黄色而不是红色突出显示错误字段

• 一次显示一个错误信息

• 你要把用户当成宝宝，他们很容易就害怕，要贴心照顾