表格标签位置，以实现最佳可用性

16

我创建一个表单，询问访问者他们firstname，middle initial和lastname。我希望这些文本字段全部内联，但是应该在哪里放置标签？在字段的左侧，顶部或下方。

从可用性的角度来看，我正在寻找最佳方法。

— 肖恩·史迪威（Shane Stillwell）
source

这对uxexchange.com更合适吗？（uxexchange.com）

— 鲍比·杰克

哇，我不知道uxechange.com的存在，谢谢。从对该问题的赞成票数来看，这绝对是Pro Webmasters的主意。

— Shane Stillwell，2010年

是的-这有点“问题”。我相信uxexchange是使用“旧版SO”模型建立的。使用新模式的网站，例如网站管理员，似乎越来越受到关注。因此，与uxexchange更相关的事情最终在网站站长上变得更加成功。我不确定解决方案是什么-迁移uxexchange吗？

— 鲍比·杰克

10

看一下UXmatters的这项研究。它相当深入，包括关于眼动的数据，并得出结论，顶部的标签总体上是最佳的解决方案。

还有一个类似的文章由卢克莱夫斯基，也相当详细。这两篇文章都值得一读！

— 格兰·佩林
source

+1我打算发布那些完全相同的资源。确实，对这个问题的任何回答都应包括研究。

— Virtuosi Media

这就是我一直在寻找的东西，左比较顶部。我敢肯定，其中很多都是主观的，但是尽管如此，在所有条件相同的情况下，有些布局还是会略胜一筹。谢谢。

— Shane Stillwell

UXmatters文章的另一个有趣之处在于，他们发现粗体标签分散了访问者的注意力，并且...“粗体标签对于用户而言更难以阅读和感知-可能是因为粗体文本和较粗的相邻边框之间存在更多的视觉混淆输入字段中。” 很高兴知道。

— Shane Stillwell

别成为负面的奈莉，但是uxmatters.com没有“热门文章”部分，甚至没有使用Google网站管理员工具，因此我可以找到他们阅读最多的文章，这不是非常用户体验！

— 尼尔·麦圭根

5

最重要的是要与您网站的其余部分保持一致。通常，大多数网站都在文本字段的左侧添加标签。因此，这将是冗长的说明，因此请确保您有空间并且流动良好。

如果在左边看起来不正确或没有空间可以做，那么我会在上面做。事实很清楚。

我要避免的唯一方法是将标签放在文本字段下。当标签在字段下时，会更加混乱。

— 本·霍夫曼
source

3

无论如何，请不要忘记该for属性。

— Pierre-Alain Vigeant 2010年

4

通常，对于您的情况，最好在顶部或左侧。只需确保标签在可访问性输入字段之前即可。

仍然有许多不同的方式来布局页面和可访问。

自此以后，表单标签实际上就可以出现在您想要的任何位置。此资源值得一看，http：//patterntap.com/tap/collection/forms

— 凯文
source

3

有两个最佳选择：

字段左侧的标签，向右刷新，使其靠近输入。
字段上方的标签

确保可用性的另一项重要注意事项是，确保您使用的是标签的for属性，以便单击标签将重点放在其所标签的字段上。

— to
source

1

答：以上都不是。在字段本身内使用占位符文本。占位符属性是HTML-5的内置部分。

否则，我想说的是放在字段上方，左对齐。

— 亚当·戴维斯
source

0

这有点切线-但是请不要使用名字/姓氏/缩写。并非每个人的名字都属于这种整齐的分组。

在StackOverflow上进行自我介绍：

许多亚洲文化放家族的名头，因为家庭被认为是比个人更重要。

注意到有很多人使用的名字不是父母授予的名字，我成功地使用了以下方案：

全名（通常用于写邮件）；姓; 已知（对话中常用的名称）。

例如：

全名：威廉·盖茨三世；姓氏：盖茨；称为：比尔

全名：宋丽; 姓氏：宋；称为：丽莎

— 贝凡
source

我看到了您建议中的价值，但关键问题将是“谁是目标受众？” 如果我的听众中有99％是美国人，那么我将使用名字/ MI /姓氏。我认为许多美国人不会立即了解一个姓氏。就像@RandomBen所说的那样，您需要保持一致，并且大多数美国网站都使用Firstname / MI / Lastname。

— Shane Stillwell，2010年