web页面的错误提示位置辩论?

我们详见的各种注册、登陆,还有各个申请表单的页面,如果出错,必定会有一个错误提示,那么社区内的各位大神,这个错误提示的位置,有没有什么理论来支持到底放在哪里呢?

比如,京东的错误提示是放在下面的。

Clipboard Image.png

比如,淘宝的错误提示是放在右边的

Clipboard Image.png

当然,对于不同的表单,错误提示的位置也是不同!

那么,对于错误提示的位置,是否有一个统一的标准,来定义错误的提示位置?

对齐原则

界面设计有一个对齐原则,就是说对于一个元素,在页面上总能找到另一个与之对齐的元素。


京东

yonghuming.png

京东注册页上的所有元素都是基于上图中的红线向左对齐的,遵循了对齐原则,因此错误提示框也应和其它元素一样基于红线向左对齐。京东logo放在了红线左边是因为它的特殊意义;与注册功能相关的元素区分开;给下方留下了适当的空白。值得注意的是“邮箱验证”是唯一没有与红线对齐,而是与其他元素向右对齐的。这么做的原因是因为在这一行向红线对齐的位置稍后要显示手机验证的提示信息。尽管如此我还是认为这个元素的位置是这个页面上的一个瑕疵。

我想吐槽的一点是如果我不填写手机号,直接点击“立即注册”,页面会给出下面的提示。

shouji.png

1. 浅灰色完全无法吸引我的注意力,让我知道是手机验证出问题的还是闪动的光标,但不是所有人都能注意到光标位置有变化并且把它和出错原因联系到一起。

2. 从提示的颜色和文案上来看,手机验证貌似都不是一个必须的步骤,可我点立即注册就是进不了下一个页面,事实与提示不符。请把warning和error区分开,warning并不阻塞流程向下一步进行,而error会堵住流程,不纠正过来就无法往下走。在用户眼里,这里就是一个warning把流程堵住了;在产品角度来看,这里就是错把error写成了warning。


淘宝

shouji2.png

淘宝注册页上所有和注册有关的元素都是基于上图中的红线向左对齐或向右对齐。这里错误提示框放在红框的右边是因为:如果把它放在红框下方,它需要和红框的左边对齐,这样破坏了所有元素都与中间红线对齐的原则;如果把它放在下面,并且与中间红线对齐,那么红框应该把“中国大陆”那个下拉框也包含在内,这样这两个元素才会对齐。总之错误框放在手机号码输入框的右边是个没有错误,中规中矩的选择。