设计表单布局:间距-点

  • A+
所属分类:网站优化

 

我们可以通过一些间隔的调整与用户进行微妙的沟通。

近距离

人类认为彼此关系密切的事物是相互关联的。相反,不相关的事物之间通常有一些空间。

这些原则告诉我们要将问题标签、问题级帮助和回答字段的部分紧密地放在一起。到目前为止,我们的表单非常好,但是让我们把标签移到右边,这样它们就更接近它们的字段了:

冲洗右标签应该靠近它们的字段。

另一方面,每个问题之间需要有一定的距离:

问题应该有足够的距离,清楚地知道一个人在哪里结束,下一个问题从哪里开始。

还记得用户视觉的焦点大约有9个字符宽吗?嗯,这意味着在一个领域的右侧的问题级帮助通常不会被看到:

他们对字段的关注意味着许多用户甚至看不到这种形式的问题级帮助。

我们可以将问题级的帮助移到字段下面,但这意味着用户在回答完问题后才会看到它。它也很难到达。

字段下面的问题级帮助不是特别可用或可访问的。

提供问题级帮助的最佳地方是介于标签和字段(如下图所示)。格式说明--就像出生日期的DD MM YYYY一样--应该放在字段的上方:

位于字段上方的格式化指令

其他问题级的帮助应该在标签下面。有关这方面的例子,请参阅荷兰银行、雇员和市场营销问题:

位于标签下面的其他问题级帮助。

最后,当我们使用复选框和单选按钮时,我们需要确保标签接近正确的按钮或框。如果它们离得太远,事情就会变得混乱,尤其是当你没有遮住触点区域的时候:

标签“是”和“否”与它们各自的单选按钮之间的距离意味着用户必须停下来思考。

这里有一个更极端的例子,说明单选按钮上的标签间距很差:

考虑到这里的间隔很差,很多用户可能会给出一个意料之外的评级。

文本框宽度

当我们调整间距时,让我们来修复文本框的宽度。

目前,除了出生日期的文本框外,我们所有的文本框都是相同的宽度:

但是,文本框的宽度告诉用户需要什么样的信息。如果我们使大小与预期的信息成比例(事实上,我们已经按照出生日期做了这样的事情),用户体验将会更好:

注意我们说的是视觉化宽度在这里,不可接受的字符数。电子邮件地址字段可能有一个可视宽度如图所示,但仍应接受多达256个字符。

空文本框

文本框间距的另一个重要方面是它们的空格。...这个空空间是用户知道他们需要在其中键入一些东西的方式。

太多的表单都有文本框不是空荡荡的。两大罪魁祸首是:

  1. 背景色
  2. 占位符文本。

无背景色

不要给您的字段以背景色。...字段中的背景颜色使它们看起来像按钮(就像没有背景色的按钮看起来像字段一样):

在此表单上,背景颜色使字段看起来像按钮,反之亦然。

四面的简单边框足以显示用户键入的位置:

你不需要太多的东西来告诉用户他们的答案去了哪里。

只要确保你的边界被看到:

这个表格的边框太轻了,几乎看不见。

没有占位符文本

甚至比背景色更糟糕的是将文本放入字段中。唯一应该出现在字段中的文本是用户的答案!

这样的文本,也称为占位符文本不幸的是太普遍了。有时是字段标签:

此窗体的标签出现在字段中。

有时候是问题级的帮助:

在字段中显示的问题级帮助。

有时候根本没用:

领域内毫无意义的信息。

不做这件事很重要,我要再说一遍。不要在字段中包含文本...它极大地恶化了表单填充体验,因为许多用户会:

  • 认为这个问题已经回答了,引发了错误。
  • 将占位符文本保留在那里,从而破坏您的数据。
  • 在占位符文本消失之前没有看到它(特别是当他们在打字时观看键盘时)
  • 无法看到所有占位符文本,因为它受字段可见宽度的限制
  • 忘了标签上写着什么
  • 忘了问题级的帮助是怎么说的
  • 发现课文太小,无法阅读
  • 无法复习他们的答案
  • 纠正错误有更大的困难。
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: